前言
在现代前端开发中，难免会使用到各类 npm 包，Redux 作为流行的状态管理库也有不少相关的 npm 包，其中 redux-typed-action 就是一款较为实用的包，它提供了类型化的标准 Action 创建方法和 Action 类型定义，使得在编写 Redux 相关代码时，能更有智能提示和类型检查，降低了出错的概率。本文将介绍如何使用 redux-typed-action 包。
安装
redux-typed-action 包可以在 npm 上下载。
npm install --save redux-typed-action
使用方法
在项目中引入 redux-typed-action 包，并创建一个类型化的 Action 创建方法。以下示例演示如何创建一个 ADD_TODO 的类型化 Action 创建方法：
import { createAction } from 'redux-typed-action';
export const ADD_TODO = 'ADD_TODO';
export const addTodo = createAction(ADD_TODO)<{ text: string }>();在 createAction 函数中传入一个类型化字符串 ADD_TODO，这个字符串用于标识一个 Redux Action，同时该函数返回一个创建 Action 的函数。泛型 <{text: string}> 表示这个 Action 所带的数据类型是一个对象，该对象中有一个 text 属性，类型是 string。
接下来在 Reducer 中可以使用这个类型化的 Action。以下示例演示如何使用 ADD_TODO Action：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
------ - -------- - ---- ------------
--------- --------- -
------ - --- ------- ----- ------ ----
-
----- ------------ - -
------ ---
--
------ ----- ----------- - --------------------------- -
----------- ------- ------- -- -
----- - ---- - - ---------------
----- ----- - ---------------- - --- -------------- ---- ---
------ -
---------
------
--
--
---以上示例代码演示了如何使用 createReducer 函数，它创建了一个 Reducer 函数，第一个参数传入了初始状态 initialState，第二个参数是一个 Reducer 方法对象，其中 { [ADD_TODO]: (state, action) => {...} } 表示在处理 ADD_TODO 这个类型化的 Action 时，执行匿名函数，并传入当前状态 state 和 Action，该匿名函数中根据 Action 所带来的 text 属性，生成一个新的 todos 数组，将其与原有状态中的 todos 进行合并并返回。
接下来再进行一个示例，演示如何在组件中使用这个类型化的 Action 创建方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - ------- - ---- -------------------
----- ------- - -- -- -
----- ------ -------- - -------------------
----- -------- - --------------
----- ------------ - ------- -- -
----------------------------
--
----- ----------- - -- -- -
-- ------ -
------------------ ---- ----
------------
-
--
------ -
-----
------ ----------- ----------------------- ------------ --
------- ------------------------- -------------
------
--
--
------ ------- --------在组件中使用 useDispatch 方法获取一个 dispatch 函数，然后通过 addTodo 方法创建一个 ADD_TODO 类型的 Action 并传入所带的数据对象，最后将其传入 dispatch 函数中即可。
总结
redux-typed-action 包提供了类型化的标准 Action 创建方法和 Action 类型定义，可以让我们在编写 Redux 相关代码时，能更有智能提示和类型检查，降低了出错的概率，增加了开发效率。希望这篇文章能够给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dc031