Redux异步Action Ajax请求

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

Redux异步Actions(Async Actions)

Redux异步Action需借助Redux Thunk中间件。

redux-thunk是一个独立的包,使用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,收到最新的State后,就能够决定如何处理页面了。

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

三个基本原则

单一的Store

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

只读的State

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

纯函数的reducers

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

设计思想

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

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

如何选择

不要简单的问题复杂化。

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

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

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

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

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

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