Redux 中间件

中间件允许我们扩展、增强 redux应用程序。

加入了中间件的Redux 工作流程

二. React 中间件 - 图1

开发Redux 中间件

redux 中间件有模版代码，他的本质上是一个柯里化形式的函数

  1. export default store => next => next => action => { }

注册中间件

中间件开发完成以后只有被注册才能在Redux 的工作流程中生效

  1. // 引入applyMiddleware 注册中间件的方法
  2. // logger 为自己开发的中间件
  3. import { createStore, applyMiddleware } from 'redux';
  4. import logger from './middlewares/logger';
  6. createStore(reducer, applyMiddleware(
  7.     logger
  8. ))

注册多个中间件

store 先按顺序执行注册的中间件，然后再到reducer中。

  1. import { createStore, applyMiddleware } from 'redux';
  2. import logger from './middlewares/logger';
  3. import test from './middlewares/test';
  5. createStore(reducer, applyMiddleware(
  6.     logger,
  7.   test
  8. ))

next(action)

一定要在中间件中调用next(action) 方法，否则action传递不到reducer中。

  1. 当前中间件不关心你想执行什么样的异步操作，只关心你执行的是不是异步操作
  2. 如果你执行的是异步操作，在触发action的时候 给我传一个函数 如果执行的是同步操作 就
  3. 异步操作代码要写在你传递进来的函数中
  4. 当前这个中间件函数在调用你传递进来的函数时 要将dispatch方法传递过去
  1. // middleware/thunk.js
  2. export default ({dispatch}) => next => action => {
  3.     if (typeof action === 'function') {
  4.         return action(dispatch);
  5.     }
  6.     next(action);
  7. }
  9. // actions/modal.action.js
  10. export const show_async = () => dispatch => {
  11.     setTimeout(() => {
  12.         dispatch(show())
  13.     }, 2000)
  14. }
  16. // store/index.js
  17. import { createStore, applyMiddleware } from 'redux';
  18. import reducer from './reducers/root.reducer'
  19. import thunk from './middleware/thunk';
  21. // 注册中间件
  22. // applyMiddleware(thunk)
  24. export const store = createStore(reducer, applyMiddleware(thunk));