Redux 是前端领域非常流行的状态管理工具，可以帮助我们管理应用程序的数据流。虽然 Redux 本身已经提供了类型定义文件，但是在实际开发中，使用 TypeScript 进行联合开发，可以让我们更快捷、更可靠地进行开发。本文将结合示例代码，详细介绍 Redux 如何使用 TypeScript 联合开发。
安装
首先需要安装 Redux 和 TypeScript：
--- ------- ------ ----- --- ------- ---------- ----------
如果你还没有安装 TypeScript，可以使用以下命令安装：
--- ------- -- ----------
创建 store
Redux 中的 store 是整个应用程序的状态树。我们首先需要创建一个新的 TypeScript 文件，并编写存储所有状态的类型：
--------- -------- - -- ----- --------- -
接下来定义操作此状态树的 Action：
--------- ------ - ----- ------- --------- ---- -
其中 type 字段是每个 Action 的类型，payload 是该 Action 的负载数据。我们还需要声明一个 Reducer 函数，将 Action 与 AppState 对象一起传递：
----- ------- - ------- --------- ------- ------- -- - -- ----- ------ ------ ------ -
最后使用 createStore 函数创建 Redux store：
------ - ----------- - ---- -------- ----- ----- - ---------------------
到此，一个基本的 Redux store 就已经创建成功了。
使用 Action 和 Dispatch
接下来，我们需要定义一组 Action 创建函数和其对应的 Action 类型。在 TypeScript 中，使用 enum 关键字可以定义一个有限的、枚举值唯一的结构体：
---- ----------- -
-------- - -----------
----------- - --------------
-
--------- ------------- ------- ------ -
----- ---------------------
-------- -
----- -------
--
-
--------- ---------------- ------- ------ -
----- ------------------------
-------- -
------ -------
--
-
------ ---- ---------- - ------------- - -----------------这里我们定义了两个 ActionType，分别叫做 ADD_TODO 和 TOGGLE_TODO。对应的 Action 创建函数分别叫做 addTodo 和 toggleTodo：
----- ------- - ------ -------- ------------- -- -- ----- --------------------- -------- - ---- -- --- ----- ---------- - ------- -------- ---------------- -- -- ----- ------------------------ -------- - ----- -- ---
为了触发 Action，我们需要使用 dispatch 函数：
----------------------------- ---------
Redux 会自动将 Action 和 AppState 对象传递给 Reducer 函数，并返回新的 AppState。
访问 store 中的状态
我们可以使用 getState 函数来访问 store 中的状态：
----- ----- - -----------------
在 TypeScript 中声明所有的状态类型是一个好习惯。除了可以在代码中增加可读性之外，还帮助我们防止类型错误。
整合 React 和 Redux
如果没有 React，Redux 就是一把没有剪刀的剪子。在我们的项目中使用 Redux，通常是为了管理 React 组件的状态。这里我们使用一个待办事项列表作为示例，展示 React 和 Redux 如何共同工作。
首先，我们需要安装 React 和 ReactDOM：
--- ------- ------ ----- ---------
然后编写一个简单的 React 组件，展示所有待办事项：
------ - -- ----- ---- --------
--------- ------------- -
----- -------
-
------ ----- --------- ----------------------- - -- ---- -- -- -
-----------------
--
--------- ------------- -
------ ------- ----- ------ ---
-
------ ----- --------- ----------------------- - -- ----- -- -- -
-----
----------------- ------ -- -
--------- ----------- ---------------- --
---
------
--接下来，我们需要连接组件和 Redux store。为此，我们可以使用 Provider 组件，并传递 Redux store 作为 store 属性。
------ - -- ----- ---- --------
------ - -- -------- ---- ------------
------ - -------- - ---- --------------
----- --- - -- -- -
--------- --------------
--------- ---------- --
-----------
--
-------------------- --- ---------------------------------现在，我们需要连接 TodoList 组件和 Redux store。为此，我们需要编写一个简单的 mapStateToProps 函数：
--------- --------- - ------ ------- ----- ------ --- - ----- --------------- - ------- ---------- -- -- ------ ------------ ---
然后，我们可以使用 Redux 的 connect 函数连接 TodoList 组件：
------ - ------- - ---- -------------- ----- ----------------- - -----------------------------------
最后，我们可以将 TodoListContainer 组件替换 TodoList 组件：
----- --- - -- -- -
--------- --------------
------------------ --
-----------
--现在，我们已经成功将 React 和 Redux 连接在一起了。
总结
在本文中，我们讨论了如何使用 TypeScript 开发 Redux 应用程序。我们首先创建了 Redux store，然后定义了一组 Action 创建函数，最后整合 React 和 Redux，并展示了如何类常规地将它们整合在一起。通过 TypeScript，我们可以提高代码的可读性、可维护性和可靠性。希望可以帮助读者更好地掌握 Redux 和 TypeScript 联合使用的技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66503f79d3423812e4280cdd