介绍
Redux 是一个流行的 JavaScript 应用程序状态管理库。它被广泛用于 React 应用程序中，但它也可以用于任何 JavaScript 应用程序中。使用 TypeScript 编写 Redux 应用程序可以提高开发人员的生产力并减少错误。
在这篇文章中，我们将向您演示如何使用 TypeScript 开发 Redux 应用程序。我们将介绍 Redux 和 TypeScript 的基础知识，然后演示如何编写类型安全的 Redux 应用程序。
Redux 和 TypeScript
Redux 可以使用 TypeScript 来提供类型安全。TypeScript 是一个静态类型检查器，用于在运行时捕获许多常见的 JavaScript 错误。TypeScript 还提供了编写更清晰，更容易理解的代码的工具。
要使用 TypeScript 编写 Redux 应用程序，您需要了解以下概念：
- Redux Store：存储整个应用程序的状态。
- Redux Action：描述应用程序中发生的事件。
- Redux Reducer：根据触发的操作来修改状态。
- TypeScript Interface：描述数据类型的结构。
接下来，我们将演示如何使用 TypeScript 创建 Redux Store、Action 和 Reducer。但首先，让我们看一下如何设置 TypeScript 环境。
搭建 TypeScript 环境
我们可以使用 Create React App 2 来生成带有 TypeScript 支持的应用程序。使用以下命令：
npx create-react-app my-app --template typescript
这将创建一个新的 React 应用程序，并自动将 TypeScript 添加到项目中。该应用程序现在就准备好实现 Redux 状态管理。
创建 Redux Store
在 Redux 中，Store 存储了整个应用程序的状态。要创建具有类型安全的 Redux Store，请首先定义一个名为RootState的 TypeScript 接口，例如：
interface RootState {
counter: number;
}这将描述我们整个应用程序的状态。现在，我们需要为这个状态创建一个 Reducer。在这个 Reducer 中，我们需要有初始状态和一些处理 action 的规则。例如：
-- -------------------- ---- -------
----- ------------ - -
-------- --
--
------ ----- ----------- - -
------ --------- - -------------
------- ---------
-- --------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--在此示例中，我们定义了初始状态为 { count: 0 }。我们还定义了两个 Redux Action：INCREMENT 和 DECREMENT。最后，我们通过检查 Action 类型来处理这些 Action。
现在我们需要将我们的 Reducer 传递给 Redux Store。我们可以使用 createStore 函数来创建 Store。例如：
import { createStore } from "redux";
import { rootReducer } from "./rootReducer";
const store = createStore(rootReducer);我们现在有一个具有类型安全的 Redux Store，可以在我们的应用程序中使用。
创建 Action
在 Redux 中，Action 是描述应用程序中发生的事件的对象。使用 TypeScript，我们可以定义一个接口来描述 Action 的结构。例如：
-- -------------------- ---- ------- --------- --------------- - ----- ------------ - --------- --------------- - ----- ------------ - ---- ------------- - --------------- - ----------------
在这个示例中，我们定义了两个 Action 接口：IncrementAction 和 DecrementAction。我们还定义了一个 CounterAction 类型，它是所有可能的 Action 的联合类型。
现在我们需要将 Action 触发到我们的应用程序中。为此，我们可以创建一个 Action Creator 函数。例如：
export const increment = (): IncrementAction => ({
type: "INCREMENT",
});
export const decrement = (): DecrementAction => ({
type: "DECREMENT",
});在这个示例中，我们定义了 increment 函数和 decrement 函数，它们都返回正确的 Action 对象。现在我们就可以在我们的应用程序中使用这些函数了。
使用 Redux
我们已经准备好在我们的应用程序中使用 Redux 了。我们可以使用react-redux包来连接 Redux Store 到我们的 React 组件中。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- -----------------------
------ - ---------- --------- - ---- ---------------------------
----- -------- -------- - -- -- -
----- ----- - ------------------- ---------- -- ---------------
----- -------- - --------------
------ -
-----
------- ----------- -- -----------------------------------------
--------------------
------- ----------- -- -----------------------------------------
------
--
--
------ ------- --------在此示例中，我们使用 useSelector 函数来选择 Redux Store 中的计数器值。我们还使用 useDispatch 函数来分派 increment 和 decrement 函数，并将它们放置在按钮上。
现在，我们已经成功使用 TypeScript 编写 Redux 应用程序了！
结论
使用 TypeScript 编写 Redux 应用程序可以提高开发人员的生产力并减少错误。在这篇文章中，我们展示了如何使用 TypeScript 中的接口定义 Redux Store、Action 和 Reducer。我们还演示了如何使用 Action Creator 函数来触发 Action，并使用 useSelector 和 useDispatch 函数来使用 Redux Store。
在您的下一个项目中，使用 TypeScript 编写 Redux 应用程序，并享受类型安全和更易于管理的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0ac566fbf96019733aeea