章节 37 | Redux与类型

在复杂的前端应用开发中，状态管理是一个至关重要的环节。随着应用规模的扩大，组件间的状态共享和更新变得日益复杂，这时候就需要一个统一的状态管理库来维护应用的状态。Redux 就是这样一个专为 JavaScript 应用设计的状态容器，它提供了可预测化的状态管理方式。然而，当 TypeScript 遇上 Redux，两者的结合不仅增强了类型安全性，还极大地提升了开发效率和应用的可维护性。本章节将深入探讨如何在 TypeScript 项目中高效地使用 Redux，并充分利用 TypeScript 的类型系统来优化 Redux 的使用体验。

37.1 引言

Redux 的核心思想是将整个应用的状态存储在一个单一的 store 中，并且这个状态是只读的，唯一改变状态的方式是触发 action，action 是一个用于描述已发生事件的普通对象。Reducer 函数接收当前的 state 和一个 action，返回新的 state。这种设计使得应用的状态变化变得可预测、可追踪和易于测试。

TypeScript 的加入，为 Redux 带来了强大的类型支持。通过为 actions、reducers、store 等关键部分添加类型注解，我们可以在编译时捕获到许多潜在的错误，从而提高代码质量，减少运行时错误。

37.2 设置 Redux 环境

在开始之前，确保你的项目中已经安装了 TypeScript 和 Redux 相关的库。如果你正在创建一个新的项目，可以使用 Create React App（带 TypeScript 支持）或者其他 TypeScript 友好的脚手架工具。对于已存在的项目，确保安装了 redux、react-redux（如果你在使用 React）以及 redux-thunk（或其他中间件，如果你需要处理异步逻辑）等库。

npm install redux react-redux redux-thunk

37.3 Actions 的类型定义

在 Redux 中，每个 action 都需要一个 type 属性来标识其类型。使用 TypeScript，我们可以为 action 创建一个接口或类型别名，来明确指定 action 的结构。

// actions/types.ts
export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
// 定义 action 类型
interface AddTodoAction {
  type: typeof ADD_TODO;
  payload: string; // 假设我们存储的 todo 是一个字符串
}
interface DeleteTodoAction {
  type: typeof DELETE_TODO;
  id: number; // 假设每个 todo 都有一个唯一的 ID
}
// 联合类型表示所有可能的 action 类型
type TodoAction = AddTodoAction | DeleteTodoAction;

37.4 Reducers 的类型安全

Reducer 是根据当前的 state 和一个 action 来返回新 state 的纯函数。在 TypeScript 中，我们可以为 reducer 函数及其参数和返回值指定类型，以增强类型安全。

// reducers/todos.ts
import { ADD_TODO, DELETE_TODO } from '../actions/types';
interface Todo {
  id: number;
  text: string;
}
interface TodoState {
  todos: Todo[];
}
const initialState: TodoState = {
  todos: [],
};
function todosReducer(state = initialState, action: TodoAction): TodoState {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, { id: state.todos.length + 1, text: action.payload }],
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.id),
      };
    default:
      return state;
  }
}
export default todosReducer;

37.5 配置 Store

Store 是 Redux 应用中的单一数据源，它包含了应用的整个状态树。使用 TypeScript，我们可以为 store 的类型进行注解，以便在应用中更准确地使用它。

// store/index.ts
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import todosReducer from '../reducers/todos';
const rootReducer = combineReducers({
  todos: todosReducer,
  // 可以添加更多 reducer
});
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);
export type AppState = ReturnType<typeof rootReducer>;
export default store;

37.6 使用 Redux Toolkit

虽然手动编写 actions、reducers 和配置 store 是学习 Redux 的好方法，但在实际项目中，推荐使用 Redux Toolkit（RTK）。RTK 提供了一套现代的、易于使用的 API，包括用于编写 reducers 的 createSlice 函数，以及自动处理 action creators 和 action types 的机制。更重要的是，RTK 内置了对 TypeScript 的支持，能够自动生成类型定义。

// 使用 Redux Toolkit
import { configureStore, createSlice } from '@reduxjs/toolkit';
interface Todo {
  id: number;
  text: string;
}
const todosSlice = createSlice({
  name: 'todos',
  initialState: { todos: [] as Todo[] },
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      state.todos.push({ id: state.todos.length + 1, text: action.payload });
    },
    deleteTodo: (state, action: PayloadAction<number>) => {
      state.todos = state.todos.filter(todo => todo.id !== action.payload);
    },
  },
});
export const { addTodo, deleteTodo } = todosSlice.actions;
export default configureStore({
  reducer: {
    todos: todosSlice.reducer,
  },
});
// 自动生成的类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

37.7 在 React 组件中使用 Redux

如果你在使用 React，react-redux 库提供了 useSelector 和 useDispatch 这两个钩子，让你能够在组件中方便地访问 store 的状态和分发 actions。

// 组件中使用 Redux
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, deleteTodo } from './store/todosSlice';
const TodoList: React.FC = () => {
  const todos = useSelector((state: RootState) => state.todos.todos);
  const dispatch = useDispatch();
  const handleAddTodo = (text: string) => {
    dispatch(addTodo(text));
  };
  const handleDeleteTodo = (id: number) => {
    dispatch(deleteTodo(id));
  };
  // 渲染逻辑...
};
export default TodoList;

37.8 总结

Redux 与 TypeScript 的结合为复杂的前端应用提供了强大的状态管理和类型安全保障。通过为 actions、reducers、store 等关键部分添加类型注解，我们能够在编译时捕获潜在错误，提高代码质量，减少运行时错误。同时，Redux Toolkit 的引入进一步简化了 Redux 的使用，使得开发者能够更专注于业务逻辑的实现。在未来的开发中，建议充分利用 TypeScript 的类型系统和 Redux Toolkit 的现代 API，来构建更加健壮、可维护的前端应用。