redux-thunk以及自定义redux中间件

  前面几篇文章详细介绍了mini-redux、mini-react-redux，其中还有一个概念，便是redux中间件，其实redux中间件的结构并不复杂，作为开发者完全可以自定义开发满足自己需求的中间件，当然，你必须保证不会影响到其它中间件，而且要确保代码的正确性。

以最常见的redux-thunk中间件为例，在传递action至真正的reducer之前，它会经过redux-thunk处理，如果是函数，则直接执行，不会继续往下传递。下面是它的源码

// 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;

如果让我自己写的话，便是下面这样

// 自定义实现redux-thunk
function createThunkMiddleware() {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState);
    }
    return next(action);
  };
}

export default createThunkMiddleware();

其中去除了extraArgument的处理，因为暂时的确没有用到。

通过分析源码可以得知，redux的中间件其实是一种如下形式的三层箭头函数

({ dispatch, getState }) => next => action => {...};

如果不好理解的话那可以用function改写，如下

function middleware({dispatch,getState}){
    return function(next){
        return function(action){
            ...
        }
    }
}

这样便很好理解了，中间件其实就是一个多层嵌套的函数，最外层接收{dispatch,getState}对象作为参数，然后返回一个新的函数，这个函数接受next，next的值又是什么呢？这里就需要结合applyMiddleware的源码去分析了，因为中间件便是在那里面传入的。

下面自定义一个简单的可以处理action类型为数组的中间件

function createArrayThunkMiddleware() {
  return ({ dispatch, getState }) => next => action => {
    if (Array.isArray(action)) {
      return action.forEach(item => dispatch(item));
    }
    return next(action);
  };
}

export default createArrayThunkMiddleware();

相关文章

mini-redux系列之一：createStore
mini-redux系列之二：applyMiddleware
mini-redux系列之三：combineReducers
mini-redux系列之四：bindActionCreators
mini-react-redux系列之一：Provider
mini-react-redux系列之二：connect
redux-thunk以及自定义redux中间件