5分钟掌握React的Redux Toolkit + Redux

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: number
  title: 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",  // 不同的 Slice
  initialState: { 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 的使用，让代码更加简洁、高效！