在前端开发中，React 和 Redux 组合是非常强大的，但是使用 TypeScript 可以使代码更加健壮和可维护。本文将介绍如何在 React 应用中集成 TypeScript 和 Redux，从而提高代码的质量和可维护性。
环境准备
在开始之前，我们需要准备一些环境：
- Node.js 和 npm
- React 和 Redux 的基础知识
- TypeScript 的基础知识
如果您还不熟悉上述技术，建议先学习它们的基础知识。
创建 React 应用
首先，我们需要创建一个新的 React 应用。我们可以使用脚手架工具 create-react-app 来快速创建一个基础的 React 应用。在命令行中执行以下命令：
npx create-react-app my-app --template typescript cd my-app npm start
上述命令将创建一个名为 my-app 的 React 应用，并使用 TypeScript 模板。然后，我们可以进入应用目录并启动应用。
安装依赖
接下来，我们需要安装一些依赖。打开命令行，并在应用目录下执行以下命令：
npm install --save redux react-redux @types/react-redux
上述命令将安装 Redux 和 React-Redux 库，并且还会安装 TypeScript 类型定义。
创建 Redux Store
Redux 应用由一个 Store 维护状态，并由 Reducer 处理状态的更新。我们将使用 TypeScript 来创建一个类型安全的 Store。
首先，我们需要在应用根目录下创建 src/store 目录，并创建 index.ts 文件。我们将在这个文件中创建 Store。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ----------- ---- -------------
------ - -------- - ---- ----------
----- -------------- - -- -- -
----- ----------- - ------------------
----- ----- - ------------
------------
--------------------------------
--
------ ------
--
------ ------- ---------------上述代码中，我们使用 createStore 函数来创建一个 Redux Store。为了处理异步操作，我们使用了 redux-thunk 中间件。
我们还需要在 src/store 目录下创建 types.ts 文件，定义应用的 State 类型：
export interface AppState {
// Define application state here
}在应用根目录的 src 目录中，创建 index.tsx 文件，并从 src/store 目录中导入 configureStore 函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ -------------- ---- ----------
------ --- ---- --------
----- ----- - -----------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们从 store 目录中导入了 configureStore 函数，然后将创建的 Store 传递给 React-Redux 的 Provider 组件。这个组件会在应用中的所有组件中注入 Store。
创建 Redux Reducer
接下来，我们需要创建一个 Reducer 来处理更新状态。我们将在 src/store/reducers 目录下创建 index.ts 文件。
import { combineReducers } from 'redux';
import { AppState } from '../types';
const rootReducer = combineReducers<AppState>({ // 改动
// Define reducers here
});
export default rootReducer;下一步，我们需要定义一个具体的 Reducer 来处理状态更新。例如，我们可以为应用中的计数器创建一个 Reducer。
-- -------------------- ---- -------
------ - ---------- - ---- -------------
------ - -------- - ---- -----------
------ --------- ------------ -
------ -------
-
----- ------------- ------------ - -
------ --
--
----- -------------- - ------ - ------------- ------- ---- -- -
------ ------------- -
---- ---------------------
------ - --------- ------ ----------- - - --
---- ---------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
------ ------- ---------------上述代码中，我们定义了一个 CounterState 类型来描述计数器应用的状态。然后，我们定义了一个 Reducer 来处理状态更新。
在 src/store/reducers/index.ts 文件中，我们可以组合多个 Reducer。
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ -------------- ---- ------------------- ------ - -------- - ---- ----------- ----- ----------- - --------------------------- -------- --------------- --- ------ ------- ------------
上述代码中，我们将 counterReducer 组合为 rootReducer，并将其分配给 AppState 类型。这样我们就可以在整个应用中访问计数器状态。
创建 Redux Action
接下来，我们需要定义 Action 和 Action Creator。我们将在 src/store/actions.ts 文件中创建各种 Action。
-- -------------------- ---- ------- ------ ---- ---------- - --------- - ------------ --------- - ------------ - --------- --------------- - ----- --------------------- - --------- --------------- - ----- --------------------- - ------ ---- ------ - --------------- - ---------------- ------ ----- --------- - --- --------------- -- -- ----- --------------------- --- ------ ----- --------- - --- --------------- -- -- ----- --------------------- ---
上述代码中，我们定义了 ActionType 枚举来描述 Action 类型。然后，我们定义了 IncrementAction 和 DecrementAction 接口，作为 Action 的基本类型。最后，我们定义了具体的 Action Creator，生成相应的 Action。
实现 React 组件
现在，我们可以在 React 组件中使用 Redux State 和 Action Creator。例如，我们可以为计数器应用创建一个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- - ---- -----------------
------ - ---------- --------- - ---- -------------------
----- -------- -------- - -- -- -
----- -------- - --------------
----- - ----- - - ------------------- --------- -- ---------------
----- --------------- - -- -- ----------------------
----- --------------- - -- -- ----------------------
------ -
-----
----------------
------- ------------------------------------
--------------------
------- ------------------------------------
------
--
--
------ ------- --------在上述代码中，我们使用 React-Redux 库中的 useSelector 和 useDispatch Hook 从 Redux Store 中获取状态和分派 Action。
总结
在这篇文章中，我们学习了如何使用 TypeScript 集成 Redux 和 React。我们创建了可维护和类型安全的 Redux Store、Reducer 和 Action，并且在 React 中使用了它们。希望这篇文章对您在前端开发中集成 TypeScript 和 Redux 提供了指导和启示。
示例代码可以在 GitHub 上找到：React TypeScript Redux Demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5cd4aadd4f0e0ffe8b460