在 React 应用开发中，状态管理是必不可少的部分，而 Redux 是当前比较流行的状态管理工具之一。在 Redux 中，需要用到很多 action 类型常量，如果手写 action 类型常量容易出错，也不利于维护。这时，我们可以使用 npm 包 redux-action-type-creator 来自动生成 action 类型常量，本文将详细介绍 redux-action-type-creator 的使用方法。
一、安装
使用 npm 包管理器可以方便地安装 redux-action-type-creator，命令如下：
npm install redux-action-type-creator --save
二、使用方法
1. 创建 action 类型
redux-action-type-creator 可以自动生成 action 类型。在创建 action 类型时，需要提供一个字符串作为 action 类型的前缀，如下：
import createTypes from 'redux-action-type-creator';
const types = createTypes('todos');上面代码创建了一个以 todos 为前缀的 action 类型常量对象 types。
2. 定义 action 类型
定义 action 类型时，可以分别使用 createRequestTypes、createActionType、createSyncActionTypes 和 createAsyncActionTypes 方法。
createRequestTypes
createRequestTypes 方法用于生成 Request 类型常量，该方法接收一个字符串作为参数。
-- -------------------- ---- ------- ----- ----- - --------------------- ----- ------- - ----------------------------- ------------------- -- ------ -- - -- -------- ---------------------------- -- -------- ---------------------------- -- -------- --------------------------- -- -
createActionType
createActionType 方法用于生成普通的 action 类型常量，该方法接收两个参数，第一个参数为字符串类型，作为 action 类型的后缀；第二个参数为可选参数，作为 action 类型的前缀。
const types = createTypes('todos');
const ADD_TODO = createActionType('ADD_TODO', types);
// 生成结果为：todos/ADD_TODOcreateSyncActionTypes
createSyncActionTypes 方法用于生成同步 action 类型常量，该方法接收一个字符串作为参数。
-- -------------------- ---- ------- ----- ----- - --------------------- ----- -------- - --------------------------------- ------- -- ------ -- - -- -------- ------------------------- -- -------- ------------------------- -- -------- ------------------------ -- -
createAsyncActionTypes
createAsyncActionTypes 方法用于生成异步 action 类型常量，该方法接收一个字符串作为参数。
-- -------------------- ---- ------- ----- ----- - --------------------- ----- -------- - ---------------------------------- ------- -- ------ -- - -- -------- --------------------------- -- -------- --------------------------- -- -------- ----------------------- -- -
3. 示例代码
Action types
-- -------------------- ---- -------
------ ----------- ---- ----------------------------
-- --- ----- ---- ------ --
----- ----- - ---------------------
-- -- ----------- - ------- ----
----- ----------- - --------------------------------- -------------------
-- -- -------- ------ ------ ----
----- -------- - -
----- --------------------------------- -------
------ ---------------------------------- ------
--
------ -
------------
--------
--Reducer
-- -------------------- ---- -------
------ - ------------ -------- - ---- ------------
----- ------------ - -
------ ---
-------- ------
------ ----
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
-- ----------- - ------- ----
---- --------------------
------ -
---------
-------- -----
------ ----
--
---- --------------------
------ -
---------
-------- ------
------ --------------------
--
---- --------------------
------ -
---------
-------- ------
------ --------------------
--
-- -------- ------ ------ ----
---- ----------------------
------ ------
---- ----------------------
------ -
---------
------ -
---------------
-------------------
-
--
---- ----------------------
------ -
---------
------ --------------------
--
---- -------------------------
------ ------
---- -------------------------
------ -
---------
------ -
---------------
-------------------
-
--
---- ----------------------
------ -
---------
------ --------------------
--
--------
------ ------
-
--
------ ------- -------------三、总结
本文介绍了 npm 包 redux-action-type-creator 的使用方法，包括创建 action 类型、定义 action 类型和示例代码。使用 redux-action-type-creator 可以避免手写 action 类型常量时的错误，并且便于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005652c81e8991b448e1a86