HOW - React 状态模块化管理和按需加载（一） - react-redux

@PHARAOH2024-11-29 21:42

目录

  • 一、背景
  • 二、react-redux
    • 模块化管理
    • 按需加载
      • [1. 动态模块加载的核心逻辑](#1. 动态模块加载的核心逻辑)
      • [2. 实现动态加载 Reducer](#2. 实现动态加载 Reducer)
        • [修改 Store 配置](#修改 Store 配置)
      • [3. 动态注入模块的 Reducer](#3. 动态注入模块的 Reducer)
        • [示例：动态加载 `user` 模块](#示例：动态加载 user 模块)
        • [示例：动态加载 `product` 模块](#示例：动态加载 product 模块)
      • [4. 组件中按需加载模块](#4. 组件中按需加载模块)
        • [示例：加载 `user` 模块](#示例：加载 user 模块)
      • [5. 结合代码分割](#5. 结合代码分割)
        • [示例：使用 React 的 `lazy` 和 `Suspense`](#示例：使用 React 的 lazy 和 Suspense)
      • [6. 清除不需要的模块](#6. 清除不需要的模块)
        • [实现移除 Reducer 的方法](#实现移除 Reducer 的方法)
        • [示例：移除 `user` 模块](#示例：移除 user 模块)
      • [7. 优势](#7. 优势)

一、背景

在构建 React 项目时，必不可少的就是一些全局或者多组件共享数据的管理。官方推荐使用 react-redux.

但现在还流行另外一个框架，jotai.

我们今天就来学习一下如何基于 react-redux进行状态模块化管理和按需加载，包括为什么且在什么场景下可以引入 jotai 使用。

二、react-redux

关于 react-redux 基本使用就不过多介绍了。

模块化管理

在 React + Redux 项目中，将 Redux 状态和逻辑分模块管理是一种常见的实践，可以提高代码的可维护性和可扩展性。以下是分模块管理 Redux 的常用方法和步骤：

1. 模块化文件结构

一种常见的项目结构是将每个功能模块的状态管理放在单独的文件夹中。

例如，一个项目包含用户管理和商品管理模块，可以按如下结构组织：

复制代码 
src/
├── store/          // Redux 全局 store
│   ├── index.ts    // 配置 store
│   ├── rootReducer.ts // 合并 reducers
├── features/
│   ├── user/       // 用户模块
│   │   ├── userSlice.ts
│   │   ├── userActions.ts
│   │   ├── userSelectors.ts
│   ├── product/    // 商品模块
│   │   ├── productSlice.ts
│   │   ├── productActions.ts
│   │   ├── productSelectors.ts

2. 使用 Redux Toolkit 的 Slice

Redux Toolkit 提供了 createSlice 方法，可以更轻松地管理每个模块的状态和操作。

例子：用户模块 (userSlice)
typescript 复制代码 
// src/features/user/userSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

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

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

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUserInfo(state, action: PayloadAction<{ id: string; name: string }>) {
      state.userInfo = action.payload;
    },
    clearUserInfo(state) {
      state.userInfo = null;
    },
    setLoading(state, action: PayloadAction<boolean>) {
      state.isLoading = action.payload;
    },
  },
});

export const { setUserInfo, clearUserInfo, setLoading } = userSlice.actions;
export default userSlice.reducer;
例子：商品模块 (productSlice)
typescript 复制代码 
// src/features/product/productSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface Product {
  id: string;
  name: string;
  price: number;
}

interface ProductState {
  productList: Product[];
  isLoading: boolean;
}

const initialState: ProductState = {
  productList: [],
  isLoading: false,
};

const productSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    setProducts(state, action: PayloadAction<Product[]>) {
      state.productList = action.payload;
    },
    addProduct(state, action: PayloadAction<Product>) {
      state.productList.push(action.payload);
    },
    setLoading(state, action: PayloadAction<boolean>) {
      state.isLoading = action.payload;
    },
  },
});

export const { setProducts, addProduct, setLoading } = productSlice.actions;
export default productSlice.reducer;

3. 合并 Reducers

使用 Redux Toolkit 的 combineReducers 将模块化的 reducer 合并。

typescript 复制代码 
// src/store/rootReducer.ts
import { combineReducers } from '@reduxjs/toolkit';
import userReducer from '../features/user/userSlice';
import productReducer from '../features/product/productSlice';

const rootReducer = combineReducers({
  user: userReducer,
  product: productReducer,
});

export default rootReducer;

4. 配置 Store

在 Redux Toolkit 中，通过 configureStore 来配置全局 Store。

typescript 复制代码 
// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const store = configureStore({
  reducer: rootReducer,
});

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

export default store;

5. 使用 Redux 状态和操作

在组件中通过 useSelector 和 useDispatch 使用 Redux 状态和操作。

例子：获取用户信息
typescript 复制代码 
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../../store';
import { setUserInfo } from '../../features/user/userSlice';

const UserProfile: React.FC = () => {
  const userInfo = useSelector((state: RootState) => state.user.userInfo);
  const dispatch = useDispatch();

  const handleLogin = () => {
    dispatch(setUserInfo({ id: '1', name: 'John Doe' }));
  };

  return (
    <div>
      {userInfo ? (
        <p>Welcome, {userInfo.name}</p>
      ) : (
        <p>Please log in</p>
      )}
      <button onClick={handleLogin}>Log In</button>
    </div>
  );
};

export default UserProfile;

6. 拓展

  • 异步操作 ：使用 Redux Toolkit 的 createAsyncThunk 管理异步逻辑。
  • 代码分割：结合动态加载模块，按需加载 Redux 状态和逻辑。
  • 测试：为每个模块单独编写单元测试，提高代码稳定性。

这种分模块的方式可以帮助你清晰地组织 Redux 状态，增强项目的可维护性。

按需加载

在某些场景下，只需要多个模块之间共享一份数据，即这份数据并不是 global 全局的。

则可以通过 按需加载 Redux 模块 来实现内存中只加载需要的模块，从而优化性能和内存占用。

这通常结合 动态模块加载 和 Redux 的 replaceReducer 功能来实现。

以下是如何实现按需加载 Redux 模块的完整方案：

1. 动态模块加载的核心逻辑

Redux 支持使用 store.replaceReducer 替换当前的根 reducer，这样就可以在需要时动态添加新的模块。

2. 实现动态加载 Reducer

修改 Store 配置

首先，创建一个支持动态加载的 Store。

typescript 复制代码 
// src/store/index.ts
import { configureStore, Reducer, CombinedState } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';

type AsyncReducers = {
  [key: string]: Reducer;
};

const createRootReducer = (asyncReducers: AsyncReducers) =>
  combineReducers({
    // 这里可以放一些全局的静态 reducer
    ...asyncReducers,
  });

const store = configureStore({
  reducer: createRootReducer({}),
});

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

store.asyncReducers = {} as AsyncReducers;

store.injectReducer = (key: string, reducer: Reducer) => {
  if (!store.asyncReducers[key]) {
    store.asyncReducers[key] = reducer;
    store.replaceReducer(createRootReducer(store.asyncReducers));
  }
};

export { RootState, AppDispatch };
export default store;

说明：

  • store.asyncReducers 用于存储动态加载的 reducers。
  • store.injectReducer 是动态注入 reducer 的方法。

3. 动态注入模块的 Reducer

在需要时加载模块并动态注入其 reducer。

示例：动态加载 user 模块
typescript 复制代码 
// src/features/user/index.ts
import userReducer from './userSlice';
import store from '../../store';

store.injectReducer('user', userReducer);
示例：动态加载 product 模块
typescript 复制代码 
// src/features/product/index.ts
import productReducer from './productSlice';
import store from '../../store';

store.injectReducer('product', productReducer);

4. 组件中按需加载模块

在组件中使用模块时，可以按需加载 reducer。

示例：加载 user 模块
typescript 复制代码 
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../../store';
import { setUserInfo } from './userSlice';

// 动态加载 user 模块
import('./index');

const UserProfile: React.FC = () => {
  const userInfo = useSelector((state: RootState) => state.user?.userInfo);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!userInfo) {
      dispatch(setUserInfo({ id: '1', name: 'John Doe' }));
    }
  }, [dispatch, userInfo]);

  return <div>Welcome, {userInfo?.name || 'Guest'}</div>;
};

export default UserProfile;

说明：

  • import('./index') 动态加载 user 模块并注入 reducer。
  • 使用时无需提前加载其他模块，减少内存占用。

5. 结合代码分割

使用 Webpack 或 Vite 的代码分割功能，将每个模块单独打包，按需加载。

示例：使用 React 的 lazy 和 Suspense
typescript 复制代码 
import React, { Suspense } from 'react';

const UserProfile = React.lazy(() => import('./features/user/UserProfile'));

const App: React.FC = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
};

export default App;

效果：

  • UserProfile 页面访问时，动态加载 user 模块。
  • 内存中仅保留使用过的模块（如 user），未使用的模块（如 product）不会加载。

6. 清除不需要的模块

如果模块加载后不再需要，可以从内存中移除 reducer。

实现移除 Reducer 的方法
typescript 复制代码 
store.removeReducer = (key: string) => {
  if (store.asyncReducers[key]) {
    delete store.asyncReducers[key];
    store.replaceReducer(createRootReducer(store.asyncReducers));
  }
};
示例：移除 user 模块
typescript 复制代码 
store.removeReducer('user');

7. 优势

  • 减少内存占用：未使用的模块不会加载到内存中。
  • 优化首屏性能：只加载当前页面需要的模块。
  • 代码分离：结合动态加载和代码分割，实现更清晰的模块管理。

这种按需加载 Redux 模块的方式非常适合大型项目，尤其是模块众多但同时使用的模块有限的场景。

相关推荐
WeiXiao_Hyy17 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡34 分钟前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone40 分钟前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king2 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵3 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星3 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解：监听响应式数据变化的利器
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Vue-skills的中文文档06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示