转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题"，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
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！