介绍
redux-container-state-thunk 是一个基于 Redux 的前端数据管理库，可以简化管理应用程序中的状态，并使其更易于测试和维护。具体而言，redux-container-state-thunk 可以帮助我们将组件级状态的更新自动管理到 Redux store 中，同时处理数据的异步请求和懒加载等复杂逻辑。
安装
我们可以使用 npm 来安装 redux-container-state-thunk：
npm install redux-container-state-thunk
同时，我们还需要安装 redux 和 react-redux 两个库来支持 redux-container-state-thunk 的使用：
npm install redux react-redux
使用
我们以一个简单的 TodoList 应用为例来说明使用 redux-container-state-thunk 的具体步骤。
首先，我们需要创建一个最基本的 Redux store，来用来存储我们的 TodoList 的状态：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------- - ---- -------------- ------ - --------------- - ---- ------------------------------ ------ ------------ ---- -------------------------- ----- ----------- - ----------------- ------ ------------- --- ----- ----- - -------------------------
上面的代码中，我们通过使用 combineReducers 函数来将多个 reducer 合并为一个 reducer 函数，并传递给 createStore 函数来生成一个 Redux store。
接着，我们需要创建一个包含 TodoList 的组件，并使用 connect 函数将该组件链接到 Redux store 中：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------------- - ---- ------------------------
----- -------- - -- ------ ------------ -- -- -
------------ -- -
---------------
-- ----
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
--
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -------- -- --
------------- -- -- ------------------------------
---
------ ------- --------
----------------
-------------------
------------上面的代码中，我们使用 connect 函数将 TodoList 组件和 Redux store 进行链接，其中：
mapStateToProps函数用来将 Redux store 中的数据映射到 TodoList 组件的props属性中。mapDispatchToProps函数用来将对 Redux store 的操作（即 actionCreators）映射到 TodoList 组件的props属性中。
在上述代码中，我们使用了 requestTodosThunk 函数，该函数用来发起一个异步请求，并将请求结果存储到 Redux store 中。其具体代码如下：
-- -------------------- ---- -------
------ ----- ----------------- - -- -- ----- -------- -- -
-------------------------
--- -
----- -------- - ----- --------------------
----- ----- - ----- ----------------
-------------------------------------
- ----- ------- -
-------------------------------------
-
--上述代码中，我们使用了 redux-thunk 的方式来处理异步请求，并将请求结果存储到 Redux store 中。需要注意的是，我们使用了三个不同的 action 来处理请求的过程：requestTodos、requestTodosSuccess 和 requestTodosFailure，这些 action 会根据请求的不同状态，更改 Redux store 中的状态，并引起 TodoList 组件的重新渲染。
组件状态管理
除了管理 Redux store 中的状态之外，redux-container-state-thunk 还可以帮助我们自动管理组件级状态的更新。在组件文本框中输入 Todo 事项，通常会使用 useState 这个 React Hook 来进行管理，其具体代码如下：
-- -------------------- ---- -------
----- -------- - -- -- -
----- ------ -------- - -------------
----- ----------------- - ----- -- -
----------------------------
--
----- ---------------- - ----- -- -
-----------------------
-------------------------
------------
--
------ -
----- ----------------------------
------ ----------- ------------ ---------------------------- --
------- ----------------- -------------
-------
--
--虽然使用 useState 可以方便地管理组件状态，但如果我们需要将 TodoList 组件和 TodoForm 组件的状态传递给 Redux store 中，那么我们就需要手动编写一些 action 的代码来处理这些逻辑。这不仅让代码变得复杂，而且也不利于代码的重构和维护。
为了解决这一问题，redux-container-state-thunk 中提供了 useContainerState 这个 React Hook 用来管理组件级状态的更新。具体而言，我们可以将上述代码进行如下修改：
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------------------
----- -------- - -- -- -
----- - ----- -------- -------- - - -------------------
----- ---
---
----- ----------------- - ----- -- -
----------------------------
--
----- ---------------- - ----- -- -
-----------------------
-------------------------
--------- ----- -- ---
--
------ -
----- ----------------------------
------ ----------- ------------ ---------------------------- --
------- ----------------- -------------
-------
--
--上述代码中，我们使用了 useContainerState 来管理 TodoForm 组件的状态。具体而言，我们首先传入了一个初始状态 { text: '' } 并调用 useContainerState 函数来获取到状态以及状态更新函数 setText。在 handleInputChange 和 handleFormSubmit 函数中，我们可以直接更新状态并对 TodoList 组件进行操作，而无需对 Redux store 进行操作。
最终，我们需要将 TodoList 组件和 TodoForm 组件链接到 Redux store，以便它们可以使用 dispatch 函数来更新 Redux store 中的状态：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- ----------------- - ---- ------------------------
------ - ----------------- - ---- ------------------------------
----- -------- - -- -- -
----- - ----- -------- -------- - - -------------------
----- ---
---
----- ----------------- - ----- -- -
----------------------------
--
----- ---------------- - ----- -- -
-----------------------
-------------------------
--------- ----- -- ---
--
------ -
----- ----------------------------
------ ----------- ------------ ---------------------------- --
------- ----------------- -------------
-------
--
--
----- -------- - -- ------ ------------ -- -- -
------------ -- -
---------------
-- ----
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
--
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -------- -- --
------------- -- -- ------------------------------
---
----- ----------------- - --------------------
----- ----------------- - --------
----------------
-------------------
------------
----- --- - -- -- -
--------- --------------
------------------ --
------------------ --
-----------
--上述代码中，我们首先将 TodoForm 组件中的状态和 dispatch 函数传递给 redux-container-state-thunk 进行管理，然后使用 connect 函数将 TodoForm 组件和 TodoList 组件链接到 Redux store，最后将链接后的组件放在 <Provider> 组件中进行渲染。
总结
redux-container-state-thunk 可以让我们更方便地管理前端应用程序中的状态，并使其更易于测试和维护。通过将组件级状态的更新自动管理到 Redux store 中，同时处理数据的异步请求和懒加载等复杂逻辑，redux-container-state-thunk 可以让我们更加专注于业务逻辑的实现，而无需过多关注状态的细节。如果您是一位初学者或想提高前端开发水平的开发者，不妨尝试一下 redux-container-state-thunk。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a64