在前端开发中，状态管理是一个非常重要的问题，特别是在大型应用程序中。Redux 是一个非常流行的状态管理库，它使我们可以轻松地管理应用程序的状态，并且还能够实现时间旅行调试等高级功能。但有些情况下我们需要在当前状态上做一些异步的操作，这时候 redux-chunk 就变得非常有用了。
redux-chunk 是一个简单易用的 Redux 插件，它能够让我们创建和调用异步的 actions。在这篇教程中，我们将学习如何使用 redux-chunk。
安装
在使用 redux-chunk 之前，你需要先安装它。你可以使用 npm 或者 yarn 安装：
--- ------- ----------- ------ - -- ---- --- -----------
然后在 Redux store 中使用该插件：
-- -------- ------ - ------------ --------------- - ---- ------- ------ --------------- ---- ------------- ------ ----------- ---- ------------ ----- ----- - ------------ ------------ -------------------------------- - ------ ------- -----
编写 action
我们来看一下如何编写一个 redux-chunk action：
-- ---------
------ - --------- - ---- -------
----- ------------- - -- -- -
------ -------- -- -
---------- ----- --------------- --
------ -----------
---------- -- ---------- ----- ---------------- -------- ---- ---
------------ -- ---------- ----- ---------------- ----- ---
-
-
------ ------- -------------在上面的代码中，fetchData 是一个返回 Promise 的异步操作函数。我们先 dispatch 一个 FETCH_PENDING action 来表示异步操作正在进行中，然后获取数据，并分别返回 FETCH_SUCCESS 和 FETCH_FAILURE action，分别表示异步操作成功和失败。
绑定 action
在组件中，我们可以像绑定普通的 action 一样来绑定 redux-chunk action:
------ ----- ---- -------
------ - ------- - ---- -------------
------ ------------- ---- ----------
----- ----------- ------- --------------- -
----------------- -- -
--------------------------
-
-- ---
-
----- ------------------ - -
-------------
-
------ ------- ------------- --------------------------------在上面的代码中，我们定义了一个 mapDispatchToProps 函数，将 myAsyncAction 绑定到组件的 props 上，并在组件的 componentDidMount 生命周期方法中调用该函数。
总结
通过 redux-chunk，我们可以轻松地创建和调用异步的 action，使我们的状态管理更加灵活和强大。希望这篇教程能够帮助你更好地掌握 redux-chunk 的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668881e8991b448e2bff