1. Redux 和 Redux Toolkit 简介
2. 如何定义 store（比如在 main.tsx 中引入）
3. 如何拆分业务逻辑（slice）
4. 业务代码中如何使用 Redux（dispatch 和 selector）

src/
  store/
    index.ts           # store 创建和导出
    counterSlice.ts    # 业务 slice
    userSlice.ts       # 另一个 slice (可选)
  main.tsx             # 入口，挂载 Provider
  App.tsx              # 主组件
  components/
    Counter.tsx        # 使用 redux 的组件

1. Redux 和 Redux Toolkit 简介

• Redux 是一个状态管理库，核心思想是维护一个全局的单一状态树（store），通过 action 修改状态，状态的变更必须是纯函数（reducer）完成的。
• Redux Toolkit 是官方推荐的 Redux 代码编写工具包，简化了 Redux 的样板代码，包括 configureStore, createSlice, createAsyncThunk 等API，能极大提高开发效率，减少样板代码。

2. 定义 Store（main.tsx）

通常，会先用 createSlice 来拆分业务逻辑，再用 configureStore 来创建 Redux store。然后在入口文件用 <Provider> 包裹应用，将 store 传入。

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

interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value += 1
    },
    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,
    // 这里可以继续添加其他 slice reducer
  }
})

// 推断 RootState 和 AppDispatch 类型，方便后面使用
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import App from './App'
import { store } from './store'

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

---

3. 拆分业务逻辑（slice）

createSlice 是 Redux Toolkit 推荐的写法，它会自动生成 action 和 reducer，并且支持 Immer 可以直接写“可变”代码（其实底层是不可变处理）。

比如有多个业务模块，可以分别建多个 slice 文件：

• userSlice.ts 管理用户信息
• cartSlice.ts 管理购物车
• productSlice.ts 管理商品信息

这样代码解耦，职责清晰。

4. 业务代码使用 Redux

在组件中，通常通过 React-Redux 提供的 useDispatch 和 useSelector 访问状态和分发事件。

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

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

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

PS

• 异步操作 用 createAsyncThunk 写异步 action，配合 slice 处理 pending/fulfilled/rejected 状态。
• 推荐写 typed hooks，比如封装 useAppDispatch 和 useAppSelector，避免每次都写类型。

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector