在前端的开发中，redux 是一个十分重要的状态管理工具。但是，在使用 redux 进行开发时，我们经常需要手动编写大量重复的模板代码，这很不方便。这时候，redux-typed-actions 这个 npm 包就可以帮我们解决这个问题，它提供了一个简单的、类型安全的方法来定义 redux action。
安装
你可以使用 npm 命令来安装 redux-typed-actions：
npm install redux-typed-actions --save
使用
使用 redux-typed-actions 可以大大简化 redux action 的创建过程，并且保证类型安全。接下来我们将通过一个简单的示例来演示如何使用它。
定义 action
在使用 redux-typed-actions 的时候，我们需要首先定义 action。我们可以通过 createStandardAction 或 createCustomAction 来创建 action。
createStandardAction
使用 createStandardAction 来创建标准的 action。标准的 action 中只包含一个 payload 字段。
import { createStandardAction } from 'redux-typed-actions';
export const increase = createStandardAction('INCREASE')<number>();
export const decrease = createStandardAction('DECREASE')<number>();在上面的示例中，我们创建了两个标准的 action，分别是 increase 和 decrease。它们都传入了一个 string 类型的参数作为 action type。由于这两个 action 都需要一个参数来表示增加或减少的数量，所以我们使用了泛型语法添加了一个 number 类型的参数。
createCustomAction
如果我们需要创建一个自定义的 action，可以使用 createCustomAction。在定义这种类型的 action 时，我们需要明确指定 payload 字段以及它的类型。
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- ------ ----- ------- - ------------------- ----------- ------ ------- -- -- ---- -- ---- ------ ----- ------ - ------------------- ---------- ----- ------- -- -- --- -- ----
在上面的示例中，我们创建了两个自定义的 action，分别是 setName 和 setAge。它们都传入了一个 string 类型的参数作为 action type。在定义 payload 时，我们传入了一个回调函数来生成它的值。这种方式使得我们可以根据需要创建比较复杂的 payload 类型。
使用 action
在定义 action 后，我们可以在 redux 的 reducer 中使用它。
-- -------------------- ---- -------
------ - ----------- ------- - ---- ----------------------
------ - --------------- - ---- --------
------ - --------- --------- -------- ------ - ---- ------------
---- ------- - -----------
------ -------- - ------ -------- - ------ ------- - ------ ------
--
--------- ----- -
------ -------
----- -------
---- -------
-
----- ------------ - -
------ -------------- - --
------- -------
-- -------------- -- -
------ ------------- -
---- ------------------
------ ----- - ---------------
---- ------------------
------ ----- - ---------------
--------
------ ------
-
--
----- ----------- - -
------ ----------- ------ - ------ - - ----- --- ---- - --
------- -------
-- ----------- ------ - ------ -- -
------ ------------- -
---- -----------------
------ - --------- ----- ------------------- --
---- ----------------
------ - --------- ---- ------------------ --
--------
------ ------
-
--
------ ------- ------------------------
------ -------------
----- ------------
---在上面的示例中，我们首先定义了一个 Actions 类型来表示最终的 action 类型。我们使用 ActionType<typeof increase | typeof decrease | typeof setName | typeof setAge> 来定义它，这表示了我们可以使用 increase、decrease、setName 和 setAge 这些 action。
之后，我们定义了一个状态 State，包含了 count、name 和 age 三个字段。我们使用了 Pick 类型来确保我们只使用了所需要的字段。
在 reducer 中，我们使用 getType 函数来获取 action type。这使得我们可以通过类型而不是字符串来引用 action。
最后，我们使用 combineReducers 来组合我们的 reducer。
Action 中间件
在使用 redux 进行开发时， redux-thunk 是一个十分常见且有用的中间件。而在使用 redux-typed-actions 时，我们可以使用 createStandardAction 和 createCustomAction 的第二个可选参数来为 Action 的中间件提供更多的参数。
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------
------ - ----------- - ---- --------------
---- ----- - -
------ -------
--
------ ----- -------- - -------------------------------- -------- ------- -- --
------
--------------
------ ----- ------------- - --- ------------
-----
------
----------
----------------- ---------
- -- ---------- --------- -- -
------------- -- -
----------------------
-- ------
--在上面的示例中，我们定义了一个 increaseAsync 函数，并使用了 ThunkAction 类型来指定了参数类型和返回类型。在 createStandardAction 中，我们传入了一个回调函数来生成 payload，这使得我们可以访问更多的参数，如 amount。这些参数可以在 Action 的中间件函数中被访问到。
总结
redux-typed-actions 提供了一种简单的方式来创建类型安全的 redux action，并且可以避免手动编写大量重复的模板代码。在这篇文章中，我们学习了如何使用 createStandardAction 和 createCustomAction 来定义 Action。我们也演示了如何使用 Action 中间件来获取更多的参数，这使得我们可以使用 redux-typed-actions 来替代其他 redux 中间件。
让我们尝试将 redux-typed-actions 应用到我们的项目中，看看它能为我们带来多少便利吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671581e8991b448e368b