作为前端开发者，我们经常需要使用 Redux 来管理我们的应用程序状态。Redux 是一个非常强大以及灵活的状态管理库，但是如果没有合适的方式来组织和使用 Redux 的时候，Redux 的代码会变得难以维护，因为它的代码是高度耦合，而且编写 Redux 的代码也很繁琐。这就是为什么有必要使用一个 Redux 标准行为 npm 包来简化这个过程。在本文中，我们将通过一个实例来学习如何使用 redux-standard-actions，来管理我们的 Redux 应用程序状态。
什么是 redux-standard-actions？
redux-standard-actions 是一个提供标准化的 Redux 操作的 npm 包。它能够帮助我们简化 Redux 应用程序中的代码，使其更具可读性、可维护性以及易于测试。
该 npm 包通过两个主要组件来实现它的功能：
- actionTypeCreator：一个辅助函数，它简化了创建 Redux 操作类型的过程。
- createAction：一个函数用于创建标准的 Redux 操作对象。
安装 redux-standard-actions
你可以使用 npm 来安装 redux-standard-actions:
npm i redux-standard-actions
创建一个 Redux 应用程序
首先，让我们创建一个简单的 Redux 应用程序。我们的应用程序将由一个计数器组成，它将允许我们增加或减少计数器的值。这个示例用到了 Redux-Thunk 来实现异步操作。
安装 Redux 和 Redux-Thunk
首先，让我们安装 Redux 和 Redux-Thunk：
npm i redux redux-thunk
创建 Redux Store
然后，创建 Redux store，并将其导出。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
--
----- ----- - -------------------- ----------------------------------
------ ------- ------创建 React 组件
最后，让我们创建一个简单的 React 组件，并将其连接到 Redux store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ---------- --------- - ---- ------------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
--------- -----------
------- ----------- -- -------------------------------
------- ----------- -- -------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- --
-------------------
-
----------
---------
--
--------
--
------ ------- --------
----------------
------------------
-----------创建 Redux 操作对象
现在，我们可以使用 redux-standard-actions 创建标准的 Redux 操作对象。我们只需要使用 createAction 函数，该函数接受一个操作类型和一个创建操作负载的函数。让我们从创建一个简单操作开始：
import { createAction } from 'redux-standard-actions';
export const increment = createAction('INCREMENT');
export const decrement = createAction('DECREMENT');现在，我们可以使用 createAction 函数来创建标准的 Redux 操作对象了。你可以将其视为一个简单的对象，其中包含一个 type 属性和一个 payload 属性。
我们可以将 createAction 变为一个更加灵活的函数，使其接受一个参数，该参数将会成为操作的负载:
import { createAction } from 'redux-standard-actions';
export const incrementBy = createAction('INCREMENT_BY', amount => ({ amount }));现在，我们有了一个名为 incrementBy 的操作，它接受一个 amount 参数，该参数将被包装在操作的 payload 属性中。
触发 Redux 操作
现在，我们可以在组件内部使用我们创建的操作类型来触发 Redux 操作：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ---------- ---------- ----------- - ---- ------------
----- ------- ------- --------------- -
----------------- - -- -- -
--------------------------
--
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
--------- -----------
------- ----------- -- -------------------------------
------- ----------- -- -------------------------------
------- ------------------------------------------ -- ----------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- --
-------------------
-
----------
----------
-----------
--
--------
--
------ ------- --------
----------------
------------------
-----------现在，我们就可以在组件中使用我们创建的标准化操作，来触发 Redux 操作了。
结论
在本文中，我们介绍了如何使用 redux-standard-actions，来简化并且标准化Redux 应用程序中的代码，使之更加具有可读性、可维护性和易于测试的特性。通过组织和缩短 Redux 的代码，使用 redux-standard-actions 可以帮助我们创建更加高效的 Redux 应用程序，这也是保持前端应用程序代码质量所必需的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bf0