Redux 中间件

中间件是什么？

　　　　阮一峰老师在Redux入门教程(二)中提到：“中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。”

 

为什么使用中间件？

　　　　Redux中的action仅支持原始对象，处理有副作用的action，需要使用中间件。中间件可以在发出action，到reducer函数接受action之间，执行具有副作用的操作。

　　　　我们知道，Redux 的业务逻辑是：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。

　　　　但是，还一个关键问题：异步操作时怎么办？

　　　　Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。

　　　　而让 Reducer 在异步操作结束后自动执行，就需要用到中间件（middleware）。

 

如何使用中间件？

　　createStore(reducer, [initState], enhancer)  (还原剂,[初始状态],中间件)    reducer:接受state与action,返回新的state

 

  // 引入中间件
  import { applyMiddleware, createStore } from 'redux';
  import createLogger from 'redux-logger';
  const logger = createLogger();
  // 传入中间件
  const enhancer = applyMiddleware(thunk)
  createStore(reducer，enhancer) // createStore(fn, [initState],middleware); 
  // 👆 第一个参数是一个函数，返回新生成的Store对象，第二个参数是State 
  的最初状态，通常由服务器给出（可省略）
  //  👇 简写
  const enhancer= createStore(
  reducer,
  applyMiddleware(thunk));

 

 

　　上面代码中，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。

 　　store.dispatch：发起actions，实际应用中，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

　　( dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据 )

 

　　注:中间件的次序有讲究。

const store = createStore(

reducer,

applyMiddleware(thunk, promise, logger));

　　上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。

 

常用中间件

• redux-thunk

• redux-devtools-extension

• redux-saga

• redux-promise