ReactNative之Redux入门（6）- 中间件认识以及其他中间件的推荐

注：本教程针对于有过React/ReactNative开发经验的人群。

阮一峰老师的博客： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

其他中间件：

redux-persist

redux-sage

redux-router

redux-arena

......

还有很多拓展中间件，有兴趣的话可以寻找使用。

中间件的介绍

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

一：集成中间件

通过applyMiddlewares依次添加

import thunkMiddleware from ' redux-thunk ';

const store = createStore (

reducer ,

applyMiddleware ( thunkMiddleware )

) ;

在前面Demo中的Store.js文件中集成。

也可以添加多个中间件，要按顺序依次添加

const store = createStore (

reducer ,

applyMiddleware ( thunk , promise , logger )

) ;

有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。

二：中间件是干什么的

看到这里，你可能会问，applyMiddlewares这个方法到底是干什么的？

它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。下面是它的源码。

export default function applyMiddleware (... middlewares ) {

return ( createStore ) => ( reducer , preloadedState , enhancer ) => {

var store = createStore ( reducer , preloadedState , enhancer ) ;

var dispatch = store . dispatch ;

var chain = [] ;

var middlewareAPI = {

getState : store . getState ,

dispatch : ( action ) => dispatch ( action )

};

chain = middlewares . map ( middleware => middleware ( middlewareAPI )) ;

dispatch = compose ( ... chain )( store . dispatch ) ;

return {... store , dispatch }

}

}

上面代码中，所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法。

其实中间件就是把store.dispatch进行改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

完结。

更多用法请根据官方文档慢慢学习探讨。

英文原版： http://redux.js.org/

中文文档： http://www.redux.org.cn/

阮一峰老师redux基础： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

阮一峰老师redux中间件： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

阮一峰老师react-redux： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html