在前端开发中，我们经常使用 redux 来管理应用程序的状态。redux-create-types 是一个非常实用的 npm 包，它可以帮助我们轻松地创建 redux 中的 action types。本文将详细介绍如何使用 redux-create-types。
安装
使用下面的命令安装 redux-create-types：
npm install redux-create-types --save
使用
假设你的 redux store 中有一个 counter 属性，你需要定义它的 action types，步骤如下：
- 首先，打开 index.js 文件并导入 redux-create-types。
import { createTypes } from 'redux-create-types';- 创建一个常量，命名为 COUNTER_TYPES，并将它的值设为 createTypes 的结果。
const COUNTER_TYPES = createTypes('COUNTER', [
'INCREMENT',
'DECREMENT',
'RESET'
]);上面的代码定义了三个redux的action type: INCREMENT, DECREMENT 和 RESET。
- 在 reducer 中使用定义好的 COUNTER_TYPES。
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
----- ------------ - -
------ -
--
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------------------
------ ----------------- ------ -
------ ----------- - -
---
---- ------------------------
------ ----------------- ------ -
------ ----------- - -
---
---- --------------------
------ ----------------- ------ -
------ -
---
--------
------ ------
-
-- 在 action creators 中使用定义好的 COUNTER_TYPES。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------ ------ -------- ----------- - ------ - ----- ----------------------- -- - ------ -------- ----------- - ------ - ----- ----------------------- -- - ------ -------- ------- - ------ - ----- ------------------- -- -
至此，我们已经完成了 redux 的 action types 定义，并在 reducer 和 action creators 中使用了它们。
- 在组件中使用 action creators。
-- -------------------- ---- -------
------ - ---------- ---------- ----- - ---- --------------------
----- ------- ------- --------------- -
-------- -
------ -
-----
---------------------------
------- -----------------------------------------
------- -----------------------------------------
------- -----------------------------------------
------
--
-
-
-------- ---------------------- -
------ - ------ ------------------- --
-
-------- ---------------------------- -
------ -------------------- ---------- ---------- ----- -- ----------
-
------ ------- ------------------------ -----------------------------现在，我们已经可以在组件中使用 action creators 来触发 redux 的 action 了。
总结
在本文中，我们学习了如何使用 npm 包 redux-create-types 创建 redux 的 action types。通过学习本文，您将能够更轻松地管理 redux 中的 action types，并获得更好的代码实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8aa9