Redux 是一款强大的 JavaScript 状态容器，常用于 React 应用程序的状态管理。Redux 中间件是一种增强 Redux 功能的方式，它可以在 Redux 的数据流中插入自定义逻辑。两个常用的 Redux 中间件是 thunk 和 redux-promise。两者都可以处理异步数据，但在实现方式和适用场景上略有不同。本文将比较这两个中间件，以便开发者选择适合自己项目的中间件。
Redux-thunk
thunk 是一个函数，它接收 dispatch 和 getState 两个参数。当 thunk 中间件被应用于 Redux 中，如果 Redux 收到一个函数类型的 action（判断是函数型的 action，根据 Redux 只能接收 Plain Object 的限制可以解决， function action(store) { return store.dispatch(...) }），则 Redux 会调用该函数，并将其传递 dispatch 和 getState 两个参数。这样，我们就可以在这个函数中进行一些异步处理，例如网络请求。一旦我们的异步处理完成，我们可以再次调用 dispatch 方法，分发一个普通的 action。这个过程非常方便，而且不需要使用其他的库或工具。
-- ------------------------------
----- ----------- - ----- -- -
------ -------- ---------- -
---------- ----- --------- ---
------------- -- -
---------- ----- ---------- ----- --- ---
-- ------
--Redux-promise
redux-promise 是一个使用 Promise 对象作为 action 返回值的中间件。如果 Action 是 Promise 类型的，则 redux-promise 中间件将等待 Promise 对象处理完成后，再将其转成一个普通的 action 分发给 Redux 仓库。如果 Promise 处理返回值，则会将其作为 payload 赋值给 action 对象，然后将 action 对象传递给 reducer。
-- -----------------------------------------
----- ----------- - ----- -- --
----- ----------------
-------- --- ----------------- ------- -- -
-- ---- - -- -
------------- -- -
-------------
-- ------
- ---- -
------------- -- -
------------- -------
-- ------
-
---
---适用场景
Redux-thunk 对于简单的异步操作更加灵活和方便，使用函数作为 action 能够在处理异步逻辑的同时，仍然保持 action 对象的格式不变，使用起来非常方便。但是，当异步操作较为复杂，需要实现轮询、中断、模糊查询等操作时，thunk 可能会显得力不从心。此时，redux-promise 可以非常完美地解决这些问题。
当然，redux-promise 使用 promise，其实与 async/await 同样实用，为什么也没有它来的火？我认为主要有以下原因：
- 首先当时还没有 async/await，promise 使用较为晦涩不易理解，普及不高。
- 其次 promise 是需要一定的 promise 知识储备才能使用，而 async/await 像同步代码一样简洁易懂，容易上手。
- 最后，就是redux-promise 的缺陷：只能等待异步操作结束后才能向 reducer 中分发 action，他让真正增强中间件的功能无法实现，只能作为补充中间件来使用。但随着异步编程异步编程日益流行，redux-promise 的应用场景越来越广泛。
总之，选择 Redux 中间件，需要根据具体的业务需求来选择合适的中间件。对于日常简单的异步操作，可以优先选择 Redux-thunk，如果需要实现后端接口的异常处理，且需要对异步操作的中间状态进行控制，则可以选择使用 Redux-promise。
总结
在 Redux 中，中间件是非常重要的一环，与其他库有很大的差别，一个优秀的中间件不仅能够增强 Redux 功能，还能提升开发效率和交互体验。本文中，我们比较了 Redux-thunk 和 redux-promise 两个常用的异步中间件。虽然我们从功能方面对两者进行了比较，但前端技术的发展是非常快的，需要不断地更新学习新技术，然后结合业务需求进行选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6458a1c5968c7c53b0af883a