（27）Redux 进阶——③ Redux 中间件（上）：初识 Redux 中间件 | React 基础理论实操

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

1 什么是 Redux 中间件

“中间件”顾名思义肯定是“谁”和“谁”的“中间”。

先给出结论：Redux “中间件”对应的就是“Action”和“Store”之间。

但，“Action” 和 “Store” 之间是个什么东西呢？

我们再复习一下 Redux 的标准流程：

1️⃣View 在 Redux 中会派发一个 Action；

2️⃣Action 通过 Store 的 Dispatch 方法派发给 Store；

3️⃣Store 接收到 Action，并连同之前的 State，一起传递给 Reducer；

4️⃣Reducer 返回一个新的数据给 Store，Store 再去改变自己的 State。

可见，Action 通过 Store 的 Dispatch 方法派发给 Store。即，Action 和 Store 之间就是 Dispatch 这个方法。

🏆所以，Redux “中间件”是什么呢？其实它就是对 Dispatch 方法的一个封装（或者说，对 Dispatch 方法的一个升级）。

2 使用 Redux 中间件的好处

❓Redux “中间件”有什么好处呢？

答： 在处理“异步”和“复杂逻辑”时，如果将“异步”（如 AJAX 请求）和“复杂逻辑”代码全部放在“组件”里，“组件”会显得过于臃肿，难以维护！

但有了 Redux “中间件”后，这些“异步”和“复杂逻辑”代码，可以放在 Action 中（Redux-thunk）；也可以拆分出来，单独放在一个文件中管理（Redux-saga）。

这样一来，一方面使代码简洁、直观、好管理，另一方面更有利于“自动化测试”。

3 常用的 Redux 中间件有哪些

目前市面上常用的 Redux “中间件”有以下几个：

• Redux-thunk——之前的文章（如《Redux 入门——⑥ 使用 actionCreator 统一创建 action》）中，在没有“Redux-thunk 中间件”的情况下，我们反复强调 Action 只能以“对象”的形式来表示。但，当用 Redux-thunk 这个“中间件”对 Dispatch 方法做了一个升级后，Action 可以是“函数”了。此时再调用 Dispatch 方法时 dispatch(action) ：

  • 若 Action 是一个“对象”，Dispatch 方法就会直接把这个“对象”传递给 Store（和我们之前文章中的做法一样）；
  • 若 Action 是一个“函数”，升级后的 Dispatch 方法自己知道不会将“函数”直接传递给 Store。它会让“函数”先执行，待执行完成后，如果需要调用 Store，这个“函数”再去调用。

• Redux-saga——此“中间件”和 Redux-thunk 一样，也是解决“异步”问题的一个“中间件”。不同之处在于：

  • Redux-thunk 是把“异步”操作放在 Action 里（因为 action 可以是“函数”，而“函数”里就可以去做“异步”的操作）；
  • Redux-saga 则是把“异步”的逻辑拆分出来，单独放在一个文件里进行管理（你 action 该是“对象”，还是“对象”，我“异步”代码是完全放在了一个独立的文件中管理）。

• Redux-logger——它可以用来记录 Action 每一次派发的“日志”（在每一次 Action 派发之前，都可以在控制台中将其打印出来）。

下两篇文章，我们会分别用 Redux-thunk 和 Redux-saga 这两种“中间件”去实现 AJAX 数据请求。

Redux-saga 不是本系列文章的主打，它在复杂度上会比 Redux-thunk 更大一些，常用的 API 会更多一些。故我仅带你“入门”，在实际项目中如果遇到，可以在“入门”的基础上，对照官方文档迅速上手和拓展。

Redux-thunk 在市场主流的 React 项目中运用很广，后边的“简书”实战中，Redux-thunk 也会贯穿始终。

祝好，qdywxs ♥ you！