react redux 分组

在 React-Redux 应用中，对状态管理逻辑进行分组或模块化 🗂️，是提升代码可维护性和可扩展性的关键。这通常意味着将整个应用的状态（state）根据不同的功能域（feature）或业务模块拆分开来管理。

下面是一个清晰的模块化分组方案和核心实现步骤。

🗃️ 模块化分组方案

一个典型的基于功能（Feature）分组的项目结构如下所示：

src/

├── store/ # Redux 状态管理根目录

│ ├── index.ts # 创建和配置 Store 的主文件

│ └── rootReducer.ts # 根 Reducer，用于合并所有模块的 Reducer

├── features/ # 功能模块目录（核心）

│ ├── user/ # 用户管理模块

│ │ ├── userSlice.ts # 用户相关的 Slice（使用 Redux Toolkit）

│ │ └── types.ts # 用户模块的类型定义（可选）

│ ├── product/ # 商品管理模块

│ │ ├── productSlice.ts

│ │ └── productSelectors.ts

│ └── ... # 其他功能模块

└── components/ # 共享的纯 UI 组件

这种结构的核心思想是"功能切片"（Feature Slices），即所有与某个特定功能相关的状态、动作创建函数、Reducer 逻辑、副作用（如异步 thunk）以及选择器（Selectors），都集中在一个文件夹内管理。这样做的好处是功能内聚，添加、移除或修改某个功能都非常方便。

🔧 核心实现步骤

定义模块 Slice

使用 Redux Toolkit 的 createSlice 可以轻松定义每个模块的状态和更新逻辑。它为每个 case reducer 函数生成对应的 action creator。

// features/user/userSlice.ts

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

bash 复制代码

interface UserState {
  isLoggedIn: boolean;
  userInfo: { name: string; id: number } | null;
}

const initialState: UserState = {
  isLoggedIn: false,
  userInfo: null,
};

const userSlice = createSlice({
  name: 'user', // Slice 的名称，作为生成的 action type 的前缀
  initialState,
  reducers: {
    // 同步 action：登录成功
    loginSuccess: (state, action: PayloadAction<{ name: string; id: number }>) => {
      state.isLoggedIn = true;
      state.userInfo = action.payload;
    },
    // 同步 action：退出登录
    logout: (state) => {
      state.isLoggedIn = false;
      state.userInfo = null;
    },
  },
});

// 导出自动生成的 action creator 函数

export const { loginSuccess, logout } = userSlice.actions;

// 导出该模块的 reducer 函数

export default userSlice.reducer;

合并 Reducers

使用 combineReducers 将多个模块的 reducer 函数合并成一个根 reducer，这是 Redux 能够管理多个独立状态域的标准方式。

// store/rootReducer.ts

bash 复制代码

import { combineReducers } from '@reduxjs/toolkit'; // 或从 'redux' 导入
import userReducer from '../features/user/userSlice';
import productReducer from '../features/product/productSlice';

const rootReducer = combineReducers({
  user: userReducer,    // 状态树中通过 `state.user` 访问
  product: productReducer, // 状态树中通过 `state.product` 访问
});

export type RootState = ReturnType<typeof rootReducer>; // 导出根状态类型，便于在组件中使用
export default rootReducer;

配置 Store

使用 configureStore 来创建 Redux store，并传入根 reducer。

bash 复制代码

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const store = configureStore({
  reducer: rootReducer,
  // 其他配置项，如中间件，configureStore 已默认配置了常用中间件
});

export type AppDispatch = typeof store.dispatch; // 导出 Dispatch 类型，用于异步 Action
export default store;

使用 Provider 注入 Store

在应用顶层，使用 Provider 将 store 注入到 React 应用中，这样所有子组件才能访问到 Redux store。

// 例如在 main.tsx 或 index.js 中

bash 复制代码

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>
);

在组件中连接状态和操作

在组件中，使用 React-Redux 的 Hooks（如 useSelector 和 useDispatch）来读取状态和派发动作。

bash 复制代码

// components/UserProfile.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { loginSuccess, logout } from '../features/user/userSlice';
import type { RootState } from '../store/rootReducer';

const UserProfile = () => {
  // 从 Redux store 的 `user` 状态切片中获取数据
  const user = useSelector((state: RootState) => state.user);
  const dispatch = useDispatch();

  const handleLogin = () => {
    // 派发登录成功的 Action
    dispatch(loginSuccess({ name: 'Alice', id: 1 }));
  };

  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      {user.isLoggedIn ? (
        <div>
          <p>Hello, {user.userInfo?.name}!</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
};

export default UserProfile;