React Academy · 课时

Redux Toolkit 切片与 createSlice

Q: 「Redux Toolkit 切片与 createSlice」这节课中我会学到什么？

使用 createSlice 创建归约器逻辑，定义操作，并连接到 Redux Store。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 createSlice 创建归约器逻辑，定义操作，并连接到 Redux Store。

第 1 / 4 课13 个步骤

Redux Toolkit 切片与 createSlice 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用 createSlice 创建 Redux Toolkit 切片，在同一处定义操作和归约器，并将它们连接到 Redux store。

什么是 Redux Toolkit？

Redux Toolkit（RTK）是编写 Redux 的官方约定式方式。它通过一次 createSlice() 调用，将归约器、操作创建函数和初始状态组合在一起，从而消除样板代码。

安装

请安装 Redux Toolkit 和 react-redux。

npm install @reduxjs/toolkit react-redux

createSlice

使用名称、initialState 和 reducers 对象调用 createSlice()。RTK 会自动生成操作创建函数和操作类型。

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
    incrementBy: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

Immer 内部机制

RTK 内部使用 Immer，因此您可以安全地编写会修改状态的归约器逻辑（`state.value += 1`）。Immer 会在幕后将其转换为不可变更新。

配置 store

使用 configureStore() 创建 Redux store，并将您的切片添加为归约器。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

提供 store

使用来自 react-redux 的 Provider 包裹您的应用，并传入 store。

import { Provider } from 'react-redux';
import { store } from './store';

createRoot(document.getElementById('root')).render(
  <Provider store={store}><App /></Provider>
);

useSelector 与 useDispatch

使用 useSelector 读取状态，使用 useDispatch 分发操作。对于 TypeScript，请使用具有类型定义的版本。

import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const value = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <>
      <p>{value}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </>
  );
}

TypeScript 类型

从 store.ts 导出 RootState 和 AppDispatch 类型，以便创建具有完整类型定义的钩子。

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Then use typed hooks:
const value = useSelector((s: RootState) => s.counter.value);

额外归约器

extraReducers 字段用于处理来自其他切片或 createAsyncThunk 的操作。请使用构建器回调模式添加处理分支。

extraReducers: (builder) => {
  builder.addCase(fetchUser.fulfilled, (state, action) => {
    state.user = action.payload;
  });
}

快速检查

为什么可以在 Redux Toolkit 归约器内部编写类似 `state.value += 1` 的修改代码？

在交互式课程中回答

回顾

createSlice 将 name、initialState 和 reducers 合并到一个对象中。Immer 让归约器代码可以采用可变数据风格。configureStore 负责组装各个切片。useSelector 读取状态；useDispatch 分发操作。

接下来

下一课：**使用 createAsyncThunk 处理异步逻辑**——您将使用生命周期操作类型在 Redux 中处理 API 调用。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「Redux Toolkit 切片与 createSlice」课时是免费的吗？

是的 — 「Redux Toolkit 切片与 createSlice」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「Redux Toolkit 切片与 createSlice」这节课中我会学到什么？

使用 createSlice 创建归约器逻辑，定义操作，并连接到 Redux Store。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Redux Toolkit 切片与 createSlice」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy