PricingLoginStart free
Frontend Academy · 课时

Redux Toolkit：createSlice 与 configureStore

使用 createSlice 定义状态切片，在 configureStore 中组合它们，并在 React 组件中使用 useDispatch 和 useSelector 分发和读取操作。

第 1 / 4 课13 个步骤

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

为什么选择 Redux Toolkit？

Redux Toolkit（RTK）是编写 Redux 逻辑的官方且约定明确的方式。它消除了原生 Redux 中的样板代码：无需手动编写操作类型字符串，无需冗长的归约器，也无需复杂的 store 设置。

安装 Redux Toolkit

请同时安装 RTK 和 React 绑定库。

npm install @reduxjs/toolkit react-redux

createSlice——状态 + 归约器 + 操作

createSlice 一次调用即可创建一个包含状态片段、归约器和操作创建函数的切片。在底层，它使用 Immer 执行不可变更新。

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

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

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

configureStore——组装 store

configureStore 使用合理的默认配置创建 Redux store：启用 Redux DevTools，并包含 thunk 中间件。

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

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

// TypeScript types:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

提供 store

请使用来自 react-redux 的 <Provider store={store}> 包裹您的 app。

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

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

useSelector——读取状态

useSelector(selector) 从 store 中读取内容。当所选状态片段发生变化时，它会使组件重新渲染。

import { useSelector } from 'react-redux';
import type { RootState } from './store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <p>Count: {count}</p>;
}

useDispatch——分发操作

useDispatch() 返回 store 的 dispatch 函数。使用操作创建函数调用它，以触发状态变化。

import { useDispatch } from 'react-redux';
import { increment, incrementBy } from './counterSlice';

function Controls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </div>
  );
}

createAsyncThunk——异步操作

RTK 的 createAsyncThunk 会处理异步操作（API 调用），并自动分发 pending、fulfilled 和 rejected 操作。

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

export const fetchUser = createAsyncThunk(
  'user/fetchById',
  async (userId: string) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json(); // becomes action.payload on fulfilled
  }
);

// In slice:
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => { state.loading = true; })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
}

RTK Query——内置数据获取

RTK Query（RTK 的一部分）提供自动数据获取、缓存和失效处理。定义 API 端点即可获得自动生成的钩子。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getUsers: build.query<User[], void>({ query: () => 'users' }),
  })
});

// Generated hook:
const { data, isLoading, error } = api.useGetUsersQuery();

归约器中的 Immer

RTK 在内部使用 Immer，因此切片归约器可以直接修改状态。Immer 会检测修改并生成新的不可变状态对象——既能享受修改状态的便利，又能获得不可变性的安全性。

Redux DevTools

Redux DevTools 浏览器扩展可以检查每个已分发的操作及其产生的状态，甚至支持时间旅行调试：跳转到任意之前的状态。对于调试复杂的状态流非常有价值。

快速检查

Redux Toolkit 中的 createSlice 会自动生成什么？

在交互式课程中回答

总结：Redux Toolkit

createSlice 在一个定义中组合归约器和操作。Immer 让您能够安全地“修改”状态。configureStore 使用 DevTools 和 thunk 组装归约器。useSelector 读取状态。useDispatch 分发操作。createAsyncThunk 用于异步流程。RTK Query 用于支持缓存的完整数据获取。

免费开始

用 AI 导师学习 HTML — 免费

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

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

常见问题解答

「Redux Toolkit：createSlice 与 configureStore」课时是免费的吗？

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

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

使用 createSlice 定义状态切片，在 configureStore 中组合它们，并在 React 组件中使用 useDispatch 和 useSelector 分发和读取操作。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「Redux Toolkit：createSlice 与 configureStore」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. Redux Toolkit：createSlice 与 configureStore
  2. 使用 Zustand 管理轻量级 React 状态
  3. Pinia for Vue：defineStore 与 storeToRefs
  4. 何时使用全局状态与本地状态
← 返回 Frontend Academy