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

8人阅读 评论(0) 收藏 举报
分类:
注:本教程针对于有过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/

查看评论

Redux中间件在React和React-Native项目架构中的应用实践

前言在MVVM框架模式独揽天下的今天,React凭借其独特的设计思想,深入的设计理念,开辟了一条崭新的康庄大道,实属是一个重大的突破,为什么这么说呢?因为React论其设计思想,充其量只是MVVM种的...
  • jiangbo_phd
  • jiangbo_phd
  • 2017-01-13 16:12:32
  • 3382

打造Redux中间件

简单的基本中间件:const customMiddleware = store => next => action => { if(action.type !== 'CUSTOM_ACT_TY...
  • future_challenger
  • future_challenger
  • 2017-03-01 22:31:14
  • 510

redux中间件的认识

一、redux Thunk中间件的认识 主要作用就是让action创建的函数不会立即执行返回一个action对象,在正常业务开发中,我们可能要在action里面做些业务处理就可以用的到1、安装np...
  • kuangshp128
  • kuangshp128
  • 2017-08-05 22:25:13
  • 233

自定义redux中间件

今天,我们要讲解的是自定义redux中间件这个知识点。本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收。不过我会多罗嗦几句,所以不用担心。 ...
  • zhanfu2905
  • zhanfu2905
  • 2017-03-31 10:50:39
  • 706

redux-applyMiddleware实现理解+自定义中间件

前言: http://www.cnblogs.com/miaowwwww/p/6265323.html   终于好好理解了middleware。。。。 1.redux middl...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-19 15:23:58
  • 1326

【React全家桶入门之十三】Redux中间件与异步action

Redux进阶:使用Redux中间件异步触发action
  • awaw00
  • awaw00
  • 2017-02-18 16:47:52
  • 6798

理解redux和redux的中间件redux-thunk的认识

一、Action的认识 简单点说Action就是一个对象,一个必须带key为type的对象[value是自己定义的],其他的key就根据用户自己喜好自己定义: 以下都是action的定义 1、{t...
  • kuangshp128
  • kuangshp128
  • 2017-03-28 10:29:42
  • 11227

react项目学习笔记四(redux和redux的中间件redux-thunk的认识)

一、Action的认识 简单点说Action就是一个对象,一个必须带key为type的对象[value是自己定义的],其他的key就根据用户自己喜好自己定义:  以下都是action的定义  1、...
  • jimolangyaleng
  • jimolangyaleng
  • 2017-08-03 17:45:20
  • 770

[译]深入浅出Redux中间件

[译]深入浅出Redux中间件 时间 2015-10-09 09:37:12  Kazaff 原文  http://blog.kazaff.me/2015/10/09/[译]Redux中间件深...
  • xiaolei1982
  • xiaolei1982
  • 2016-05-03 09:54:00
  • 324

解读 Redux 中间件的原理

https://juejin.im/post/59dc7e43f265da4332268906 Redux 的中间件提供的是位于 action 被发起之后,到达 reducer 之前的扩展点,换...
  • sinat_17775997
  • sinat_17775997
  • 2017-10-19 19:14:43
  • 192
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 499
    排名: 10万+
    文章存档
    最新评论