首页 › React › 状态管理

Redux Toolkit（RTK）是 Redux 的官方推荐写法，简化了传统 Redux 的样板代码。

安装

npm install @reduxjs/toolkit react-redux

Store 定义

// store/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
  status: 'idle' | 'loading'
}

const initialState: CounterState = {
  value: 0,
  status: 'idle',
}

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1                   // ✅ 直接用 mutable 写法
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

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

// store/index.ts
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    // user: userReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

在 React 中使用

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

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

// Counter.tsx
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement, incrementByAmount } from './store/counterSlice'
import type { RootState, AppDispatch } from './store'

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value)
  const dispatch = useDispatch<AppDispatch>()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(10))}>+10</button>
    </div>
  )
}

异步 Thunk

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'

interface User {
  id: number
  name: string
}

interface UserState {
  users: User[]
  loading: boolean
}

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    const res = await fetch('/api/users')
    return res.json()
  }
)

const userSlice = createSlice({
  name: 'users',
  initialState: { users: [], loading: false } as UserState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false
        state.users = action.payload
      })
      .addCase(fetchUsers.rejected, (state) => { state.loading = false })
  },
})

推荐度

项目规模     推荐
-----------  ----------------
小型（<10 页） Zustand
中型            Zustand / React Query
大型（多人团队） Redux Toolkit + RTK Query

小结

• createSlice 定义 reducer 和 actions，configureStore 创建 store。
• Redux Toolkit 允许 state.value += 1（Immer 代理）。
• useSelector 读取，useDispatch 派发。
• createAsyncThunk 处理异步操作。
• 大项目用 RTK，中小项目用 Zustand + React Query。

上一节：React Query 服务端状态 下一节：React Router v6

贡献者: 布欧-Lewyon