Redux异步操作

在学习 Redux 的过程中,中间件困扰了我很久.难点主要是概念太多，接触的词太多，而且网上的案例看的头都疼，很容易晕，已经晕了好多次了。后来通过看别人的文章并不断总结，终于搞懂了，哈哈！今天大致讲下我对中间件的理解,希望能够帮助到跟我一样的 redux 的初学者.

先来一张图先，大概介绍一下redux的异步流程：

首先通过 ActionCreator 生成一个 action, 流过中间件,然后交由 dispatch 进行发送给 reducer ,再进行相关的 state 的处理.

那么中间件是如何工作的?为什么要有中间件?

传统的 redux 只能处理同步操作,用户点击一个按钮,视图就会发送一个 action 给 dispatch , dispatch 在接到 action 后,会去调用 reducer, 并将 action 丢给他,进行相应的处理.

当遇到异步操作时, 一切会变成这样.举个例子:
用户点击一个按钮后,希望2秒后视图就会发送一个 action 给 dispatch,所以具体的 ActionCreator 可以写成这样:

var ActionCreator  = function (text) {
    return setTimeout(function () {
            return {
                type: ‘ADD‘,
                text: text
            }
     }, 2000)
}

这会报错.因为 reducer 接受的 action 参数是一个普通的对象,而这里却是个函数.
怎么办? 使用中间件!
目的: 使 ActionCreator 返回的 action(此时为函数) 通过中间件,最终”转换”为一个普通的对象,这样 reducer 就能认识他了.从这里可以看出,中间件是作用在 action 产生后,reducer 接收到之前这个时间段.

中间件具体实现

原来创建 store 的方式为: createStore(reducer,initialState)
现在的方式: createStore(reducer,initialState,applyMiddleware(中间件))

当使用了中间件创建 store 时, 其实 applyMiddleware 这个函数已经将 dispatch 改造成如下:

dispatch(action){
    if(typeof action == 'function'){
        action(store.dispatch);
    }else{
       store.dispatch(action);
    }
}

这里可以看出,当 ActionCreator 返回的是普通对象时,则直接调用 store.dispatch 进行发送action, 交由 reducer 处理,
否则, 执行 action 函数.不难推断出, action(store.dispatch) 的具体实现中,包含 store.dispatch(一个普通的action对象)

这里给出常用的 redux-thunk 中间件的源码,供大家学习.

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

今天的总结就到这里先，毕竟第一次写博客,总觉得自己总结的有点乱。由于是初学异步的操作，所以可能有些地方自己总结的错了。有误之处，欢迎指出。