Redux中间件与异步操作

前端之家收集整理的这篇文章主要介绍了Redux中间件与异步操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基本流程

1.创建store,带有三个方法:store.dispatch,store.subscribe,store.getState

  1. import { applyMiddleware,createStore } from 'redux';
  2. const store = createStore(
  3. reducer,applyMiddleware(thunk,logger)
  4. );

2.view发出dispatch->action

  1. del = () => {
  2. store.dispatch({
  3. type: 'DEL',data: this.state.count - 1
  4. });
  5. }

3.reducer处理action数据
每次dispatch后return的数据即store.getState()得到的数据,即一个新的state.
所以state是一个对象,每次都是上次返回的值.
所以用Object.assign({},state,{count: action.data})

  1. export default (state = {},action) => {
  2. switch (action.type) { // state即返回的新状态,新的state即本次的返回值,所以每次都是往空的对象里,先推state,再新增属性或改变原来属性的值
  3. case 'ADD':
  4. return Object.assign({},{count: action.data});
  5. case 'ADD2':
  6. return Object.assign({},{count: action.data});
  7. case 'ADD3':
  8. return Object.assign({},{count: action.data});
  9. case 'DEL':
  10. return Object.assign({},{count: action.data});
  11. case 'AJAX':
  12. return Object.assign({},{res: action.data.res});
  13. default:
  14. return {
  15. count: 0,res: 'aaaa'
  16. };
  17. }
  18. }

4.view层通过store.subscribe()方法设置监听函数,一旦state发生变化,就会自定执行这个函数.
在这个函数里setState,就会触发整个组件的render.

  1. store.subscribe(() => { // subscribe即,每一次dispatch,都会触发reducer处理数据,即触发store.subscribe
  2. this.setState({
  3. count: store.getState().count,// reducer返回新的state,即state的值被改变state = 1
  4. res: store.getState().res
  5. });
  6. });

异步操作

1.用户发出Action,Reducer函数算出新的State,View重新渲染.
2.异步操作怎么办? Action发出以后,Reducer立即算出State,这叫做同步;Action发出以后,过一段时间再执行Reducer,这就是异步.
怎样才能Reducer在异步操作结束后自动执行呢?这就要用到新的工具:中国件(middleware)
3.中间件
只有发送Action的这个步骤,即store.dispatch()方法,可以添加功能.
可以对store.dispatch进行如下改造.

  1. let next = store.dispatch;
  2.  
  3. store.dispatch = function dispatchAndLog(action) {
  4. console.log('dispatching',action);
  5. next(action);
  6. console.log('next state',store.getState());
  7. }

上面代码中,对store.dispatch进行了重定义,在发送Action前后添加了打印功能,这就是中间件的雏形.
中间件就是一个函数,对store.dispatch方法进行了改造,在发出Action和执行Reducer这两步之间,添加了其他功能.
4.中间件的用法
redux-logger提供一个生成器createLogger,可以生成日志中间件logger,然后,将它放在applyMiddleware方法中,
传入createStore方法,就完成了store.dispatch()的功能增强.

  1. import { applyMiddleware,createStore } from 'redux';
  2. import { createLogger } from 'redux-logger';
  3. import thunk from 'redux-thunk';
  4.  
  5. const logger = createLogger();
  6.  
  7. const store = createStore(
  8. reducer,logger)
  9. );

5.applyMiddleware
applyMiddleware是Redux的原生方法,作用是将所有中间件组成一个数组,依次执行.
6.异步操作的基本思路
操作开始时,送出一个Action,触发State更新为'正在操作'状态,重新渲染.
操作结束后,再送出一个Action,触发State更新为'操作结束',view再一次重新渲染.

redux-thunk中间件

1.异步操作至少要送出两个Action,用户触发第一个Action,这个跟同步操作一样,没有问题.
如何才能在操作结束时,系统自动送出第二个Action呢?

  1. add3 = () => {
  2. store.dispatch(dispatchAction(this.state.count + 3));
  3. }
  4. function dispatchAction(count) {
  5. return (dispatch) => {
  6. dispatch({
  7. type: 'ADD3',data: count
  8. });
  9. }
  10. }

dispatchAction是一个Action Creater,返回一个函数,这个函数执行后,发出一个action,然后执行异步操作,拿到结果后,再次dispatch,发出一个Action.
dispatchAction返回了一个函数,而普通的action creator默认返回一个对象.
返回的函数的参数是dispatch和getState这两个redux方法.
action是由store.dispatch方法发送的,而store.dispatch方法正常情况下,参数只能是对象,不能是函数.
这时,就使用redux-thunk中间件,改造dispatch,使得后者可以接受函数作为参数.

使用redux-thunk发Async Action的例子

1.首先,这是个关于action creator的解释.
什么是action creator? 返回action的函数.
为什么要用action creator?图个方便吧.

  1. function changeNum(count) {
  2. return {
  3. type: 'ADD2',data: count
  4. }
  5. }
  6. add2 = () => {
  7. store.dispatch(changeNum(this.state.count + 2));
  8. }

2.Thunk的做法就是扩展了这个action creator.Thunk允许action creator返回一个函数,而且这个函数第一个参数是dispatch.所以不光改造action creator,如果你要用thunk,你还要把它放进middleware里去,这样函数类型的action就被thunk middleware捕获,根据你的函数逻辑,再去dispatch常规的action.这样Async Action其实就是发Ajax之前dispatch一发,收到服务器响应后dispatch一发,报错的话再来dispatch一发.

猜你在找的React相关文章