在前端开发中，我们经常需要使用 Redux 进行状态管理。Redux 是一个很好的解决方案，但在处理一些异步请求时，代码可能会变得有点复杂和冗长。这时，我们可以使用 Redux-promised 这个 npm 包来简化代码和处理异步请求。
什么是 redux-promised
Redux-promised 是一个可以让 Redux 应用更容易处理异步请求的 npm 包。它结合了 Redux-promise 和 Redux-thunk 的优点，通过使用 Promise 和中间件的方式，让开发者更容易创建和处理异步请求。
安装和配置
安装 redux-promised 很简单，只需要在终端里运行：
--- ------- --------------
这个包需要使用 Redux 的中间件机制。我们需要在创建 Redux store 时使用 applyMiddleware 把 redux-promised 和其他的中间件一起使用。示例代码如下：
------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ----------------- ------ ----- ---- -------------- ------ ------- ---- ------------- ----- ----- - ------------ -------- ---------------------------------- ------ --
这里需要注意：promiseMiddleware 应该先于 thunk 中间件使用。这是要保证在进行异步请求时，我们可以使用 promise 的语法糖，同时保持 thunk 中间件对于异步请求的兼容性。
异步请求
在使用 redux-promised 处理异步请求时，我们需要使用一个特定的 action 格式。它需要包含三个属性：
- type：表示 action 的类型。
- payload：异步请求的参数，可以是任何类型的数据。
- promise：一个返回 Promise 的函数。
如果异步请求成功，redux-promised 会自动根据该 Promise 实例生成两个新的 action：
- REQUEST_SUCCESS：表示异步请求已成功执行，其 payload 属性包含异步请求返回的数据。
- REQUEST_ERROR：表示异步请求执行失败，其 payload 包含错误信息。
这两个 action 类型可以在 reducer 中进行处理，从而更改 store 中的状态。下面是一个简单的示例代码：
------ ----- ----------- - -------- -- -
------ -
----- -------------
-------- -------
-------- --------------------------------------- -- -----------------
--
--
----- ------------ - -
--------- -----
----------------- ------
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- -------------
------ - --------- ----------------- ---- --
---- -----------------------------
------ - --------- --------- --------------- ----------------- ----- --
---- ---------------------------
------ - --------- --------- ----- ----------------- ----- --
--------
------ ------
-
-这个示例中，我们创建了一个名为 getUserData 的 action creator，它包含了异步请求的参数。当执行该 action 时，就会触发异步请求过程。同时，在 reducer 中，我们处理了三个 action 类型，根据请求是否进行，我们可以改变 store 中的状态。
总结
通过使用 redux-promised，我们可以更加简便和明确地处理异步请求，同时还保持了 Redux 的优良特性。希望本教程对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700fe361a36e0bce8d46