Abyss丶Kitty的博客

我是一只快乐的程序喵!

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

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


其他中间件:
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/

阅读更多
版权声明:乐于分享,学海无涯。转载请标明出处。 https://blog.csdn.net/sinat_30949835/article/details/79962368
个人分类: ReactNative进阶
上一篇ReactNative之Redux入门(5)- redux-thunk中间件
下一篇Eclipse、Eclipse EE兼容MacBook Retina屏幕的实现方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭