在 React 中使用 Redux【1】 和 TypeScript【2】 管理状态：代码实践与指南
随着前端应用的复杂性日益增加，状态管理【3】变得越来越重要。Redux 是一个流行的状态管理库，它可以帮助我们以可预测的方式更新应用的状态。结合 TypeScript，我们可以提高代码的可维护性和类型安全性。本文将围绕 TypeScript 语言，在 React 中使用 Redux 和 TypeScript 管理状态，提供一系列的代码实践和指南。
在 React 应用中，Redux 是一个强大的状态管理工具，它允许我们集中管理应用的状态，并通过不可变数据流【4】来更新状态。TypeScript 是一个静态类型语言，它可以帮助我们提前发现错误，并提高代码的可读性和可维护性。本文将展示如何将 Redux 与 TypeScript 结合使用，以构建一个类型安全的 React 应用。
准备工作
在开始之前，请确保您已经安装了以下工具：
- Node.js 和 npm/yarn
- React 和 Redux
- TypeScript
以下是一个基本的 React 项目结构，我们将在此基础上进行开发：
my-react-app/
├── src/
│ ├── actions/
│ ├── components/
│ ├── reducers/
│ ├── store/
│ ├── types/
│ └── index.tsx
├── tsconfig.json
└── package.json
创建 Redux Store【5】
我们需要创建一个 Redux store。在 `store` 文件夹中，创建一个名为 `index.ts` 的文件，并导入所需的模块：
typescript
import { createStore } from 'redux';
import rootReducer from '../reducers';
const store = createStore(rootReducer);
export default store;
定义 Actions【6】 和 Action Types【7】
在 `actions` 文件夹中，创建一个名为 `actions.ts` 的文件，用于定义 actions 和 action types：
typescript
// actions.ts
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';
export const addTodo = (text: string) => ({
type: ADD_TODO,
payload: { text },
});
export const removeTodo = (id: number) => ({
type: REMOVE_TODO,
payload: { id },
});
定义 Reducers【8】
在 `reducers` 文件夹中，创建一个名为 `reducers.ts` 的文件，用于定义 reducers：
typescript
// reducers.ts
import { ADD_TODO, REMOVE_TODO } from '../actions';
interface Todo {
id: number;
text: string;
}
interface State {
todos: Todo[];
}
const initialState: State = {
todos: [],
};
const todoReducer = (state = initialState, action: any): State => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos, action.payload],
};
case REMOVE_TODO:
return {
...state,
todos: state.todos.filter((todo) => todo.id !== action.payload.id),
};
default:
return state;
}
};
export default todoReducer;
定义 TypeScript Types【9】
在 `types` 文件夹中，创建一个名为 `types.ts` 的文件，用于定义 TypeScript 类型：
typescript
// types.ts
export interface Todo {
id: number;
text: string;
}
export interface State {
todos: Todo[];
}
创建 React Components
在 `components` 文件夹中，创建一个名为 `TodoList.tsx` 的文件，用于展示待办事项列表：
typescript
// TodoList.tsx
import React from 'react';
import { connect } from 'react-redux';
import { State } from '../types';
import { addTodo, removeTodo } from '../actions';
interface Props {
todos: Todo[];
addTodo: typeof addTodo;
removeTodo: typeof removeTodo;
}
const TodoList: React.FC = ({ todos, addTodo, removeTodo }) => {
return (
{todos.map((todo) => (
{todo.text}
removeTodo(todo.id)}>Remove
))}
);
};
const mapStateToProps = (state: State) => ({
todos: state.todos,
});
const mapDispatchToProps = {
addTodo,
removeTodo,
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
使用 TypeScript 编译和运行应用
在项目根目录下，运行以下命令来编译 TypeScript 代码：
bash
npx tsc
然后，运行 React 应用：
bash
npm start
现在，您应该能够在浏览器中看到待办事项列表，并且可以通过添加和删除待办事项来更新状态。
总结
本文介绍了如何在 React 中使用 Redux 和 TypeScript 管理状态。通过结合 Redux 和 TypeScript，我们可以构建一个类型安全的 React 应用，提高代码的可维护性和可读性。希望本文提供的代码实践和指南能够帮助您更好地理解和应用这些技术。
Comments NOTHING