在开发 React 应用过程中，状态管理是一个非常重要的方面。Redux 是一个非常流行的状态管理库，它允许我们轻松管理我们的应用的状态。在 Redux 中，action 是一个非常关键的概念。actions 是一组面向应用程序的函数，这些函数声明了修改应用程序状态的操作。而使用 redux-action-creators 这个 npm 包可以方便的帮助我们在 Redux 中创建 actions。
安装
redux-action-creators 可以通过 npm 进行安装：
npm install redux-action-creators
创建 action creators
redux-action-creators 提供了一个 createActionCreators 函数，用于快速创建 Redux action creators。要使用它，请在您的应用程序中导入该函数并传递一个 action 定义对象作为参数。该对象应该具有一个名为 type 的属性和任何与该操作相关的其他属性。例如：
import { createActionCreators } from 'redux-action-creators';
const actions = createActionCreators({
increment: (by = 1) => ({ type: 'INCREMENT_COUNTER', by }),
decrement: (by = 1) => ({ type: 'DECREMENT_COUNTER', by }),
reset: () => ({ type: 'RESET_COUNTER' }),
});在上面的例子中，我们创建了三个 action creator。这三个 action 分别是 INCREMENT_COUNTER、DECREMENT_COUNTER 和 RESET_COUNTER。每个 action creator 都返回一个包含 type 和任何其他需要的属性的对象。
使用 created action creators
现在我们已经创建了 action creator 对象，接下来让我们将它们用于更新 Redux store。
在通常的 Redux 应用程序中，我们需要使用 dispatch 方法来触发 action，以更新应用程序状态。但是通过 redux-action-creators，我们可以将这些方法绑定到 action creator 上。这使得调用这些函数时自动将其结果调度为操作。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------------------- - ---- ------------------------
----- ------- - ----------------------
---------- --- - -- -- -- ----- -------------------- -- ---
---------- --- - -- -- -- ----- -------------------- -- ---
------ -- -- -- ----- --------------- ---
---
----- --------- - - -------- - --
-------- ------------- - ---------- ------- -
------ ------------- -
---- --------------------
------ - --------- -------- ------------- - --------- --
---- --------------------
------ - --------- -------- ------------- - --------- --
---- ----------------
------ - --------- -------- - --
--------
------ ------
-
-
----- ----- - ---------------------
-- ----- ------ -------
------------------------------------- -- - ----- -------------------- --- - -
------------------------------ -- - -------- - -在上面的例子中，我们首先创建了一个 redux store。接下来，我们将 createActionCreators 函数用于创建操作创建器，并将其存储在 actions 常量中。最后，我们通过调用 actions.increment 实际触发了操作。
使用 TypeScript
redux-action-creators 支持 TypeScript，它会自动根据您的 action 创建器创建 Type 定义。
-- -------------------- ---- ------- ------ - -------------------- - ---- ------------------------ --------- ---------- - ----- -------------------- --- ------- - --------- ---------- - ----- -------------------- --- ------- - --------- ------ - ----- ---------------- - ----- ------- - ------------------------------- - ---------- - --------- ---------- --- - -- -- -- ----- -------------------- -- --- ---------- --- - -- -- -- ----- -------------------- -- --- ------ -- -- -- ----- --------------- --- --- ---- ----------- - ----------------- ------------- ------ ----------
在上面的 TypeScript 示例中，我们首先定义了我们的 action 接口和我们的 ActionType 类型。然后我们使用 createActionCreators 函数创建了操作创建器，并将它们存储在常量 actions 中。最后，我们使用 ReturnType 获取所有操作并创建一个联合类型，这样我们就可以使用它们来定义我们的 reducer。
小结
redux-action-creators 是一种非常方便的 Redux 库，它能让我们更容易地创建操作创建器。在不使用 redux-action-creators 的情况下，我们需要编写一些繁琐的代码。但是现在，我们可以使用该包轻松创建操作，并将它们与我们的应用程序 store 集成在一起。
我们希望这篇文章对你有所帮助，希望你在学习 Redux 的过程中会对它有更深入的了解，并能轻松管理你的 React 应用程序的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7781e8991b448e5f6e