在前端开发中，状态管理是一个不可避免的问题。而 Redux 是一个非常流行的状态管理方案，其使用也变得日益普遍。但是，在使用 Redux 进行状态管理时，我们需要编写许多的 action creators，而这些代码有时会非常冗长和复杂。为了解决这个问题，我们可以使用 redux-smart-action 这个 npm 包，来简化我们的代码。
redux-smart-action 简介
redux-smart-action 这个 npm 包是一种快捷的方式来定义和使用 Redux actions，并允许用户以最小的模版和模块语法来定义和使用它们。使用 redux-smart-action，我们可以更简单地定义 action creators 内部逻辑，而无需担心过多关注 action type。
安装
在开始使用 redux-smart-action 之前，我们需要将其安装到我们的项目中：
npm install redux-smart-action --save
使用
定义 Action
使用 redux-smart-action，我们可以定义一个简单的 action，它仅包含一个类型和一个负载，只需一行代码：
import { createAction } from 'redux-smart-action';
export const increment = createAction('INCREMENT');可以看到，我们使用 createAction 方法来创建一个新的 action。这里的参数是 action 的类型，这个类型在整个应用程序中是唯一的。在创建 action 实例时，我们可以指定负载。创建出的 action 对象仅包含一个 type 字段和一个可选的 payload 字段。
Payloads 和 Meta 信息
可以将一些有用的数据和元数据发送到您的 reducer 中。Redux 的标准做法是使用 payload 属性表示数据，使用 meta 属性表示元数据。其中 payload 属性用于包含整个数据有效载荷，而 meta 属性则用于包含元数据。
import { createAction } from 'redux-smart-action';
export const increment = createAction('INCREMENT');
export const counterClick = createAction('COUNTER_CLICK', index => ({
payload: { index },
meta: { timestamp: new Date() },
}));在上述代码中，我们使用了 createAction 方法来创建了两个不同的 action，其中 COUNTER_CLICK 这个 action 包含了一个 payload 属性，该属性包含了一个 index 属性。同时，该 action 还包含了一个 meta 属性，其中包含了一个 timestamp 属性。
使用 Action
接下来，我们将看一下如何使用这个 action。
-- -------------------- ---- -------
------ - --------- - ---- ------------
------ - ----------- - ---- --------------
------ -------- --------- -
----- -------- - --------------
----- --------------- - -- -- -
----------------------
-
------ ------- ------------------------------- -----------
-在上面的代码中，我们使用了 useDispatch 钩子，将 increment action 作为参数传递给 dispatch 函数。
接下来，我们来看一个更复杂的示例，其中我们将使用 payload 属性和 meta 属性：
-- -------------------- ---- -------
------ - ------------ - ---- ------------
------ - ----------- - ---- --------------
------ -------- --------- -
----- -------- - --------------
----- ----------- - ------- -- -
------------------------------
-
------ -
--
------- ----------- -- --------------------- -- ----------
------- ----------- -- --------------------- -- ----------
------- ----------- -- --------------------- -- ----------
---
-
-在上述代码中，我们使用了 counterClick action 来包含一个 payload 属性和 meta 属性，其中 payload 属性包含了一个 index 属性。我们将 index 作为参数传递给 handleClick 处理程序函数，并使用 useDispatch 钩子来调度 action。
Reducer
当我们定义好 action 后，我们需要在 reducer 中使用它们来更新状态。Redux 中的 reducer 函数需要通过 action 类型进行判断，以决定如何更新状态。
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - ---------- ------------ - ---- ------------
----- ------------ - -
------ --
------- ---
--
-------- ------------------ - ------------------- ------- -
------ ------------- -
---- ---------------
------ ----- - --
--------
------ ------
-
-
-------- ------------------- - -------------------- ------- -
------ ------------- -
---- ------------------
----- - ----- - - ---------------
------ -
---------
-------- ------------- - ------------ - - - ---
--
--------
------ ------
-
-
------ ----- ----------- - -----------------
------ -------------
------- --------------
---在上面的代码中，我们定义了两个 reducer。 countReducer 是一个计数器 reducer，它仅仅是在 INCREMENT action 触发时将计数器加一。clicksReducer 的职责是统计每个点击的次数。
总结
在本文中，我们介绍了如何使用 redux-smart-action 这个 npm 包来简化 Redux 中的 action 创建过程。使用 redux-smart-action，我们可以更加清晰、精简的定义和暴露 action，并在组件中更容易使用的方式调度这些 action。希望这篇文章能够为你提供一些关于在 Redux 中使用 redux-smart-action 的帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b9f