TypeScript 中如何使用 Redux 应用架构
在现代的 Web 应用开发中，Redux 应用架构已成为了前端开发中非常重要的一部分。Redux 是一个状态管理库，用于管理应用中的数据流，能够使得应用的状态变得可预测和易于维护。而 TypeScript 则是在 JavaScript 的基础上添加了类型系统的语言，可以提供更好的代码提示和类型安全性。在项目中同事使用 TypeScript 和 Redux 后，我们发现通过 TypeScript 的帮助，我们可以更好地使用 Redux 应用架构，提高了项目的开发效率和代码的可读性和可维护性。
下面我将结合代码，详细介绍使用 TypeScript 和 Redux 应用架构的方法，希望能对大家有所帮助。
- 安装 Redux 和 TypeScript 类型定义
首先，我们需要安装 Redux，以及对应的 TypeScript 类型定义。可以使用 npm 进行安装：
npm install --save redux npm install --save-dev @types/redux
其中 @types/redux 是 TypeScript 的类型定义，用于提供更好的代码提示和类型安全性。
- 创建根 reducer 和 store
接下来，我们需要创建根 reducer 和 store。Reducer 是 Redux 的核心概念之一，负责根据旧的 state 和 action 返回新的 state；而 Store 则是负责管理整个应用中的 state 和 reducer 的对象。在 TypeScript 中，我们可以定义 reducer 和 state 的类型。
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
-- -- ----- --
---- ------------ - -
------ -------
--
-- -- ------ --
---- ------------- -
- - ----- ------------ -------- - ------ ------ - -
- - ----- ------------ -------- - ------ ------ - --
-- -- -------
----- --------------- --------------------- -------------- - -
----- - - ------ - --
-------
- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - -------------------- --
---- ------------
------ - ------ ----------- - -------------------- --
--------
------ ------
-
--
-- --- ------- - -----
----- ----------- - ----------------- -------- -------------- ---
---- --------- - ----------------- -------------
----- ----- - -------------------------上面代码中，我们定义了一个名为 CounterState 的 state 类型，包含一个名为 count 的 number 类型属性；定义了一个名为 CounterAction 的 action 类型，包含两个 type 为 increment 和 decrement 的 action，分别接受一个名为 value 的 number 类型属性作为参数；定义了一个名为 counterReducer 的 reducer，接受 CounterState 和 CounterAction 作为参数，根据 action 的 type 返回新的 state；最后，我们使用 combineReducers() 函数创建根 reducer，将 counterReducer 添加到根 reducer，并使用 createStore() 函数创建 store。
- 创建 action 和 action creator
在 Redux 应用架构中，action 是用来描述发生了何种事件的纯 JavaScript 对象，action creator 则是用来创建这些 action 的函数。我们同样需要定义 action 和 action creator 的类型，并创建对应的函数。
// 定义 action 类型
type CounterAction =
| { type: 'increment', payload: { value: number } }
| { type: 'decrement', payload: { value: number } };
// 定义 action creator
const increment = (value: number) => ({ type: 'increment', payload: { value } });
const decrement = (value: number) => ({ type: 'decrement', payload: { value } });上面代码中，我们在 CounterAction 上重新定义了 type，同时在 payload 中加入了 value 属性。在 increment 和 decrement 的定义中，我们需要传入一个 number 类型的参数，返回一个 type 为 increment 或 decrement 的 action。创建完 action 和 action creator 后，我们就可以在组件中使用它们。
- 创建组件和连接 Redux
我们可以使用 react-redux 库中的 connect() 函数将组件连接到 Redux。使用 connect() 函数时，我们需要传入一个名为 mapStateToProps 的函数和一个名为 mapDispatchToProps 的对象。
mapStateToProps函数用于将 Redux state 映射到组件的 props 上，返回一个对象，其中包含需要在组件中使用的 state 属性。mapDispatchToProps对象用于将 action creator 映射到组件的 props 上，返回一个对象，其中包含需要在组件中使用的 action creator。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-- -- ------------ --
---- ------------ - -
------ -------
---------- ------- ------- -- -----
---------- ------- ------- -- -----
--
-- -- ------- --
----- ------- - -- ------ ---------- --------- -- ------------- -- -
------ -
-----
--------- -----------
------- ----------- -- --------------------------------
------- ----------- -- --------------------------------
------
--
--
-- - ----- ----- ------ ----- -
----- --------------- - ------- ---------- -- --
------ --------------------
---
-- - ------ ------- ------ ----- -
----- ------------------ - -
----------
----------
--
-- -- --------- ------- -----
------ ------- ------------------------ -----------------------------上面代码中，我们定义了一个名为 CounterProps 的 props 类型，包含 count 属性和 increment、decrement 方法。定义了一个名为 Counter 的组件，接受 CounterProps 作为参数，渲染计数器 UI。在 mapStateToProps 函数中，我们通过 RootState 类型传入 Redux 的 state，并将 counter 中的 count 属性映射到组件的 count 属性上。在 mapDispatchToProps 对象中，我们将 increment 和 decrement 方法映射到组件的 props 上。最后，我们使用 connect() 函数将 Counter 组件连接到 Redux 应用中。
- 在应用中使用组件
现在我们可以在应用中使用 Counter 组件了，它已经连接到了 Redux，并且可以使用 Redux 中定义的 Action 和 State。在应用中，我们可以使用 Provider 组件为整个应用提供 Redux store。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ------- ---- ------------
------ ----- ---- ----------
----- --- - -- -- -
------ -
--------- --------------
-------- --
-----------
--
--
-------------------- --- ---------------------------------上面代码中，我们创建了一个名为 App 的组件，提供 Redux 的 store，并渲染了 Counter 组件。最后，我们使用 ReactDOM.render() 函数将 App 渲染到 HTML 中。
以上就是使用 TypeScript 和 Redux 应用架构的详细方法和示例代码。使用 TypeScript，我们可以明确地定义每个变量和对象的类型，从而提高代码的可读性和维护性。在应用架构中，使用 TypeScript 可以提供更好的类型提示和安全性。希望本文对大家能有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678198b7935627c900e0b7be