Redux 是一个流行的 JavaScript 库，为前端开发人员提供了一种管理应用程序状态的方法，以及一些可以更容易构建复杂的应用程序的工具。但是，Redux 的使用中也存在很多的限制。一个特别的限制就是，Redux 在处理基本流程类型时的代码缺乏类型安全性。本文中，将会讲解一个名为 “Redux-Common-Types-Flow” 的 npm 包，该包可以解决类型安全性问题。
Redux-Common-Types-Flow 的安装过程
首先，要使用该 npm 包，需要先完成安装过程。可以使用以下命令：
npm install -S redux-common-types-flow
安装后，就可以开始使用该 npm 包。
使用流程类型安装包
接下来，需要理解如何使用流程类型安装包来构建 type-safe Redux 应用。Redux-Common-Types-Flow 包提供了一些有用的类型和工具，如：
Action: Redux action 的基础抽象PayloadAction: 一个带有有效负载的 action，支持使用createAction函数定义Reducer: Redux Reducer 函数的抽象概念，这是应用程序状态更新的核心部分Selector: 基于应用程序状态的 compute 函数，可以将 store 中的 state 转换为 UI 需要的数据Thunk: Redux middleware 的概念，可用于编写处理异步操作和类似副作用的 action.
要开始使用这些类型，需要定义您的应用程序状态模式。例如，在一个简单的 Todo 列表应用程序中，可能会定义如下的状态模式：
-- -------------------- ---- ------- --------- ---- - --- ------- ------ ------- ---------- -------- - --------- -------- - ------ ------- ----------------- ---------- - ---------------- - -------------- -
在这里，定义了一个 Todo 对象和一个 AppState 对象。 AppState 包含了一个数组 todos ，并且定义了一个 visibilityFilter 字段，它是一个枚举类型，只能包含三种可能的值。
接下来，您可以使用 Redux-Common-Types-Flow 中的类型来定义您的 action 和 reducer。
使用 PayloadAction 定义 action
为了定义一个负载的 action，Redux-Common-Types-Flow 包提供了一个实用程序函数 createAction。需要定义一个对象作为负载数据的 action，可以使用此函数：
import { createAction } from "redux-common-types-flow";
interface AddTodoPayload {
title: string;
}
export const addTodo = createAction<AddTodoPayload>("todos/addTodo");在这里，定义了一个叫作 addTodo 的动作，并且在定义时指定了一个负载类型 AddTodoPayload。此操作的标识字符串是 "todos/addTodo"。
为了触发此操作并传入回发动作中的数据，可以调用 addTodo 作为一个 creator 函数，并且将一个 AddTodoPayload 对象作为参数传入：
addTodo({
title: "Go to the store"
})当 Redux store 中检测到这个 action 时，会调用 reducer 函数。
使用 Reducer 定义状态更新
Redux 的 reducer 函数更新应用程序状态。Redux-Common-Types-Flow 包中提供的 Reducer 抽象是一个更能够解耦状态管理的函数类型。以下是一个例子：
-- -------------------- ---- -------
------ - ------- - ---- --------------------------
------ - --------- ---- - ---- ----------
--------- -------------- -
------ -------
-
----- ------------- -------------------------- - ------ - --- ------- -- -
-- ----------------------- -
----- -------- ---- - -
--- ----------------------------------------
------ ---------------------
---------- -----
--
------ ---------- ---------
-
------ ------
--在这里，定义了一个名叫 todosReducer 的 reducer 函数，并设置了其类型为Reducer<AppState["todos"]>，其中 AppState["todos"] 是指 AppState 中的 todos field 的类型。此 reducer 函数会检测 addTodo 操作类型，然后创建 append 新的 Todo 到 AppState 的操作的更新操作。
结论
本文提供了 Redux-Common-Types-Flow 的一个简短介绍。使用该 npm 包可以帮助您在使用 Redux 时更加安全和有效的处理流程类型，更好地控制和管理您的应用程序状态。此外，Redux-Common-Types-Flow 还提供了一个更好的类型定义和自动补全，使您的代码更易于阅读和维护。
示例代码
为了方便大家使用，我们提供了以下示例代码：
-- -------------------- ---- -------
------ - ------------- ------- - ---- --------------------------
------ - --------- ---- - ---- ----------
--------- -------------- -
------ -------
-
------ ----- ------- - ----------------------------------------------
----- ------------- -------------------------- - ------ - --- ------- -- -
-- ----------------------- -
----- -------- ---- - -
--- ----------------------------------------
------ ---------------------
---------- -----
--
------ ---------- ---------
-
------ ------
--
------ ------- -------------注：此示例代码为一简单举例，如需完整代码请参考文中“使用流程类型安装包”和“使用 Reducer 定义状态更新”部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b481e8991b448defc5