Redux 是一个可预测的状态容器，用于 JavaScript 应用的管理。对于复杂的应用，可以使用 Redux 来管理应用的状态，并帮助您在其中进行更好的状态管理。然而，使用 Redux 还需要编写许多深层嵌套的代码来管理应用程序的状态。本文旨在介绍一种名为 redux-action-wrapper 的 npm 包，该包是一个用于更轻松地处理 Redux 接收器的工具。
什么是 redux-action-wrapper？
redux-action-wrapper 是一个用于处理 Redux reducers 和 Redux actions 的应用程序状态管理工具。它通过使用一个简单而有效的 API，提供了更好的状态管理方式，以便更轻松地编写可维护的代码。
安装 redux-action-wrapper
您可以通过以下命令在您的项目中安装 redux-action-wrapper：
npm install redux-action-wrapper --save
如果您使用的是 yarn，请使用以下命令：
yarn add redux-action-wrapper
如何使用 redux-action-wrapper
首先，让我们看一下常规 Redux reducer 的写法。例如，一个简单的计数器应用的 reducer 可能长这样：
-- -------------------- ---- -------
-------- -------------------- - - ------ - -- ------- -
------ ------------- -
---- ------------ -
------ - ------ ----------- - - --
-
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
-使用 redux-action-wrapper，你只需要这样：
-- -------------------- ---- -------
------ ------------- ---- -----------------------
----- -------------- - --------------
- ------ - --
-
---------- ----- -- -- ------ ----------- - - ---
---------- ----- -- -- ------ ----------- - - --
-
--redux-action-wrapper 的主要目标是简化复杂的 reducer 函数。它将 reducer 改进为可以更容易地阅读和维护。
从上述代码中，您可以看到，我们没有使用常规的 switch 语句。相反，我们使用了一个简单的对象来映射不同的 action 类型到它们的状态更新函数上。这意味着您可以很容易地添加、删除和更新 actions，而不必担心额外的复杂性。
当你的项目中有很多 actions 时，这种方式将非常有用，因为你的 reducer 代码将更简洁，更容易阅读。
redux-action-wrapper 支持哪些类型的 actions？
redux-action-wrapper 支持两种类型的 actions：
无副作用的 actions
如果 action 没有副作用，则只需将状态更新函数添加到纯对象映射中。
{
MY_ACTION_TYPE: state => newState
}含有异步副作用的 actions
当要在异步操作之后处理 actions 时，可以在映射中使用 thunk。这允许您在 action 处理时执行异步操作，如调用远程 API。这是通过创建一个 thunk 包装器函数来实现的：
-- -------------------- ---- -------
-
--------------------- ------- --------- -- -
---------- ----- ------------------------------ ---
------ --------------------------------- -- -
---------- ----- ------------------------------- -------- -------- ---
------------ -- -
---------- ----- ------------------------------ -------- --- ---
---
-
-这里有一个关于 thunks 的简短教程：
一个 thunk 是这样的一个函数（可以是高阶函数，看下面的例子），它是 Redux / Flux 架构的一个 middleware。thunk 接收 dispatch 和 getState 作为参数，并返回一个函数，该函数以 dispatch 和 getState 作为参数。原始函数是视为异步操作，在这个函数中您可以做任何您想让他做的事情。最常见的用例是调用其它 reducers 或调用远程 API。
下面是一个使用普通 thunk 的例子：
function getTodo() {
return (dispatch, getState) => {
getRemoteTodo().then(todo => {
dispatch({ type: 'GET_TODO', todo });
})
}
}您可以将其包装在一个 redux-action-wrapper 的映射对象中，这样会更加易读和简洁。
示例
下面是一个示例，展示如何在 Redux 应用程序中使用 redux-action-wrapper 和异步副作用：
-- -------------------- ---- -------
------ ------------- ---- -----------------------
----- ------------ - --------------
- ------ --- ---------- ----- --
-
------------------ ----- -- -- --------- ---------- ---- ---
------------------ ------- ------- -- -- ------ --------------- ---------- ----- ---
----------------- ----- -- -- --------- ---------- ----- ---
--------- ------- ------- -- -- ------ ---------------- --------------- ---
------------ ------- ------- -- --
------ ----------------------- -- ------- --- ----------------
---
----------------- ------- ------- -- --
------ -------------------- -- -
-- -------- --- --------------- -
-------------- - ----------------
-
------ -----
---
---
---------- -- ----- -- -- -------- -- -
---------- ----- ------------------- ---
------ -------------------
-------------- -- ----------------
------------- -- ---------- ----- -------------------- ------- ---
--------- -- -
---------- ----- ------------------ ---
---
--
-
--在上述示例中，我们使用了 thunk 来调用远程 API，并将结果传递回 redux store，包装了整个过程的 GET_TODOS 函数。我们还定义了其它的 actions，例如将 isChecked 更新为相反的值，添加新的 todo，以及删除一个 todo。
结论
在本文中，我们介绍了 redux-action-wrapper 的使用方法，它是一个可用于更轻松地处理 Redux 的接收器的工具。我们还讨论了它是如何支持处理具有异步副作用的 actions 的，并提供了一些示例代码来演示。使用 redux-action-wrapper，您可以更加方便地处理您的应用程序状态，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c1f