Redux Toolkit + Redux 教程
1. 引言
本教程介绍如何使用 Redux Toolkit（RTK） 和 TypeScript 搭建 Redux 状态管理系统。
我们将创建一个 计数器（Counter） 和 待办事项（Todo） 模块，并学习 Redux 的核心 API，如 createSlice、configureStore、useSelector 和 useDispatch。
2. 依赖安装
在 React 项目中安装 Redux Toolkit 和 React-Redux：
npm install @reduxjs/toolkit react-redux
如果使用 TypeScript，还需安装类型支持：
npm install -D @types/react-redux
3. 代码实现
3.1 定义 State 类型
// 定义 Counter 组件的状态类型
interface CounterState {value: numbertitle: string // 添加一个新字段，展示更多状态管理
}// 定义初始状态
const initialState: CounterState = {value: 0,title: "计数器"
};
3.2 创建多个 Slice
Redux Toolkit 通过 createSlice 简化了 Redux 的 reducer 和 action 创建。
创建 counterSlice
import { createSlice, PayloadAction } from "@reduxjs/toolkit";const counterSlice = createSlice({name: "counter", // Slice 名称initialState, // 初始状态reducers: {increment: (state, action: PayloadAction<number>) => {state.value += action.payload;},decrement: (state, action: PayloadAction<number>) => {state.value -= action.payload;},reset: (state) => {state.value = 0;},setTitle: (state, action: PayloadAction<string>) => {state.title = action.payload;},incrementAndSetTitle: (state, action: PayloadAction<{ amount: number; title: string }>) => {state.value += action.payload.amount;state.title = action.payload.title;}}
});
创建 todoSlice
const todoSlice = createSlice({name: "todos", // 不同的 SliceinitialState: { items: [] },reducers: {addTodo: (state, action) => {state.items.push(action.payload);}}
});
3.3 创建 Redux Store
import { configureStore } from "@reduxjs/toolkit";const store = configureStore({reducer: {counter: counterSlice.reducer,todos: todoSlice.reducer}
});export default store;
📌 Redux Toolkit 默认启用了 Redux DevTools 和 Redux Thunk，简化了开发流程。
3.4 导出 Action Creators
const { decrement } = counterSlice.actions;
const { addTodo } = todoSlice.actions;
3.5 创建 Redux 类型
// 从 store 推导出 RootState 类型
export type RootState = ReturnType<typeof store.getState>;
// 推导出 dispatch 类型
export type AppDispatch = typeof store.dispatch;
这样可以在 useSelector 和 useDispatch 中提供正确的类型支持。
3.6 创建 Counter 组件
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "./store";
import { increment, decrement, reset, setTitle, incrementAndSetTitle, addTodo } from "./store";const Counter = () => {const count = useSelector((state: RootState) => state.counter.value);const title = useSelector((state: RootState) => state.counter.title);const dispatch = useDispatch();return (<div><h2>{title}: {count}</h2><div>{/* 触发状态更新 */}<button onClick={() => dispatch(increment(1))}>+1</button><button onClick={() => dispatch(increment(5))}>+5</button><button onClick={() => dispatch(decrement(1))}>-1</button><button onClick={() => dispatch(decrement(5))}>-5</button><button onClick={() => dispatch(reset())}>重置</button>{/* 修改标题 */}<input value={title}onChange={(e) => dispatch(setTitle(e.target.value))}placeholder="输入新标题"/>{/* 组合 action */}<button onClick={() => dispatch(incrementAndSetTitle({ amount: 10, title: "增加了10!" }))}>增加10并更新标题</button>{/* 添加任务 */}<button onClick={() => dispatch(addTodo("新任务"))}>添加任务</button></div></div>);
};
3.7 创建根组件
import { Provider } from "react-redux";
import store from "./store";
import Counter from "./Counter";export const CounterApp = () => {return (<Provider store={store}><Counter /></Provider>);
};
4. 总结
createSlice：定义reducer和action creators。configureStore：创建store并自动配置Redux DevTools和Redux Thunk。useSelector：从store读取状态。useDispatch：分发action进行状态更新。
📌 通过 Redux Toolkit，我们大大简化了 Redux 的使用，让代码更加简洁、高效！
