Redux异步请求

Redux被设计成JavaScript应用程序容器,管理容器中应用的状态。异步Action需借助Redux Thunk中间件。

Redux异步Actions

redux-thunk是一个独立包,可延迟Action的发送,或在条件满足时发送Action。

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

function makeAaction(forPerson, secretSauce) {
  return {
    type: 'MAKE_SANDWICH',
    forPerson,
    secretSauce
  };
}

function todo(forPerson) {
   return function (dispatch) {
    return fetch('https://www.google.com/search?q=secret+sauce').then(
      sauce => dispatch(makeAaction(forPerson, sauce)),
      error => dispatch(makeAaction('The Sandwich Shop', forPerson, error))
    );
  };
}

store.dispatch(
  todo('Me')
);

store.dispatch(
  todo('My partner')
).then(() => {
  console.log('Done!');
});

异步重点在于createStore,多了一个applyMiddleware层。

dispatch发出的是一个函数,以便在条件满足时发送Action。

Redux异步Actions示例:

https://github.com/reduxjs/redux-thunk

https://redux.js.org/advanced/example-reddit-api

Redux相关概念

解决的问题

解决代码结构、组件间的通信问题。

核心概念

应用程序状态

应用程序状态被描述成一个对象,如,person应用程序状态如下所示:

{
  person: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

对象就像一个“模型”,没有setter方法,不能随意修改状态。

状态修改

改变对象状态,通过发送Action。

Action是一个简单的JavaScript字面量对象。

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

type属性是Action对象的标志性特征。

一个Action对象代表一次修改。

修改过程

var store = Redux.createStore(function process(state, action) {
      if (!state) {
        return 1
      }
      switch (action.type) {
        case 'add':
          return state + 1
        case 'sub':
          return state - 1
        default:
          return state
      }
    });

  store.subscribe(function(){
        console.log(store.getState().toString());
  });

  store.dispatch({ type: 'add' });
  store.dispatch({ type: 'sub' });

首先,创建一个store传入一个Reducer作为参数,Reducers定义了如何响应发送到store的操作。

然后,为store添加一个侦听器,当Reducer返回新状态时触发侦听,侦听收到新的State。

最后,调用dispatch发送一个Action。

执行流程

通过dispatch发送一个Action,store收到Action后会调用Reducer,Reducer收到当前的State和Action,根据Action对当前的State进行处理,并返回新的State。

当State发生变化,store会调用subscribe监听函数,监听函数收到最新的State,决定如何处理页面了。

在React中State一旦发现变化,就会触发页面重新渲染。

三个基本原则

单一的Store

整个应用程序状态的存储,只存储在一个store对象树中。

只读的State

改变State的唯一方法是发送一个Action。

纯函数的reducers

reducer只返回新的状态,不改变传入的状态。

设计思想

Redux被设计成JavaScript应用程序容器,管理容器中应用程序状态。

Redux可与React一起使用,也能与其他流行的UI库一起工作。

如何选择

不要简单的问题复杂化。

若不知道是否需要Redux,说明不需要。

若不使用Redux也能轻松开发,说明不需要。

若与服务端有大量交互,或是分布式数据来源,说明需要。

准备使用React构建大型应用,或者代码已成一团乱麻,尝试使用。

当一个页面中JavsScript程序状态复杂到难以管理时,用它。

当遇到React解决不了的问题,尝试用Redux。