Redux 是 React 生态圈中最常用的状态管理库之一，它通过单一数据源和不可变性的状态树解决了复杂应用中状态管理的问题。而 TypeScript 作为一种静态类型检查的语言，可以帮助我们在开发过程中避免常见的类型错误，提高代码的可维护性和可读性。本文旨在介绍如何在无痛的情况下，使用 TypeScript 重构 Redux。
安装依赖
首先，你需要安装 redux、react-redux 和 @types/react-redux 这三个依赖。其中 redux 和 react-redux 是 Redux 库的核心依赖，@types/react-redux 是它们的 TypeScript 类型定义文件。
npm install redux react-redux @types/react-redux --save
编写 TypeScript 的 Redux Store
Redux 库的核心是由多个 reducer 组成的 Store。我们需要先定义一个 Interface 来描述 Store 的状态：
interface IRootState {
count: number
}上面的 Interface 定义了一个 count 属性，它的类型为 number。
接着，我们可以编写一个 reducer 函数来处理 Store 的状态更新：
-- -------------------- ---- -------
------ - --------------- - ---- -------
----- ------------ - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - -
---- ------------
------ ----- - -
--------
------ -----
-
-
----- ----------- - -----------------
------ ------------
--
------ ---- --------- - ----------------- ------------
------ ------- -----------上面的代码定义了一个名为 countReducer 的函数，在收到 INCREMENT 和 DECREMENT 两种 Action 类型时分别让 count 值加一和减一。最后，我们将所有的 reducer 函数合并成一个 rootReducer，导出一个 RootState 类型，方便其他地方使用这个 Store 的状态。
分离 Actions 和 Action Creators
我们之前的代码中，声明了 INCREMENT 和 DECREMENT 两种 Action 类型，但是我们没有定义这两种 Action 的类型。
为了方便管理 Action 的类型，我们可以将它们定义在一个独立的文件中。一个常见的做法是将 Action 类型定义为一个常量枚举。我们先定义一个名为 ActionTypes.ts 的文件：
export enum ActionTypes {
INCREMENT = 'INCREMENT',
DECREMENT = 'DECREMENT'
}这里通过 TypeScript 中的枚举类型来定义了 INCREMENT 和 DECREMENT 两种 Action 类型，枚举值即为这两种 Action 的类型字符串。
我们还需要定义 Action Creator 函数：
-- -------------------- ---- ------- ------ - ----------- - ---- --------------- ------ ----- --------- - -- -- -- ----- --------------------- -- ------ ----- --------- - -- -- -- ----- --------------------- --
上面的代码为 INCREMENT 和 DECREMENT 两种 Action 分别定义了一个 Action Creator 函数。Action Creator 函数用来生成一个对应的 Action，它们返回的对象带有 type 属性和其他的 payload。
引入 useDispatch 和 useSelector
在 TypeScript 中使用 Redux，我们需要使用 useDispatch 和 useSelector 这两个 React Hooks。
useDispatch Hook 可以用来派发 Action：
-- -------------------- ---- -------
------ - ----------- - ---- -------------
------ - ---------- --------- - ---- -----------
----- ------- - -- -- -
----- -------- - -------------
----- --------------- - -- -- -
---------------------
-
----- --------------- - -- -- -
---------------------
-
------ -
-----
------- ------------------------------------
------- ------------------------------------
------
-
-
------ ------- -------上面的代码中，我们从 react-redux 中导入了 useDispatch，然后在组件中使用它来派发 increment 和 decrement 两种 Action。
useSelector Hook 可以用来获取 Store 的状态。我们需要传入一个函数作为参数，这个函数接收 RootState 作为参数，返回我们需要的状态。
-- -------------------- ---- ------- ------ - ----------- - ---- ------------- ------ - --------- - ---- ---------------- ----- -------------- - -- -- - ----- ----- - ------------------- ---------- -- ------------ ------ ------------------ - ------ ------- --------------
上面的代码中，我们通过 useSelector Hook 获取了 Store 的 count 状态，并在组件中将它渲染到页面上。
总结
在本文中，我们介绍了在 TypeScript 中使用 Redux 的基本流程，包括定义 Store 的 Interface 和 reducer 函数，使用 Action Creator 生成 Action，以及使用 useDispatch 和 useSelector React Hooks 操作 Redux。
TypeScript 作为一种静态类型检查的语言，可以大大提高我们的代码可读性和可维护性。在应用到 Redux 中时，它可以帮助我们在编译时检查类型错误，避免运行时出现问题。
希望这篇文章对你理解如何使用 TypeScript 重构 Redux 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647da378968c7c53b08705f9