如何配置React Redux应用使用模拟数据，API就绪后切换至真实接口？

嘿，这个需求我在项目初期碰到过好多次——先靠模拟数据把前端逻辑跑通，等后端API就绪了无缝切换，不用大改代码。我给你分享一套落地性很强的方案，亲测好用！

首先要把模拟数据和业务逻辑解耦，别硬编码在组件里。建议按模块建个fixtures文件夹，比如：

// fixtures/users.js
export const mockUsers = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" }
];

接下来一定要抽象数据获取层——不管是模拟数据还是真实API，都用统一的函数接口。比如建个services/api.js，先写模拟版本：

import { mockUsers } from '../fixtures/users';

// 统一的用户数据获取函数，业务层只认这个
export const fetchUsers = async () => {
  // 加个延迟模拟网络请求，更贴近真实场景
  await new Promise(resolve => setTimeout(resolve, 800));
  return mockUsers;
};

然后在Redux的action里调用这个函数，比如：

// actions/userActions.js
import { fetchUsers } from '../services/api';

export const getUsers = () => async dispatch => {
  dispatch({ type: 'USERS_LOADING' });
  try {
    const users = await fetchUsers();
    dispatch({ type: 'USERS_SUCCESS', payload: users });
  } catch (err) {
    dispatch({ type: 'USERS_ERROR', payload: err.message });
  }
};

这样组件和Redux逻辑完全不用关心数据来源，只认fetchUsers这个入口，后面切换数据源时根本不用碰这部分代码。

核心是用配置项或环境变量控制数据源，不用改业务代码就能切换，两种方案任你选：

方案1：环境变量（推荐，适配开发/生产环境） #

如果用Create React App，直接在项目根目录建.env.development和.env.production文件：

• .env.development：REACT_APP_USE_MOCK_DATA=true
• .env.production：REACT_APP_USE_MOCK_DATA=false

然后修改services/api.js，根据环境变量自动切换：

import { mockUsers } from '../fixtures/users';

// 真实API的请求函数
const fetchUsersFromAPI = async () => {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('Failed to fetch users');
  return response.json();
};

// 模拟数据的请求函数
const fetchUsersFromMock = async () => {
  await new Promise(resolve => setTimeout(resolve, 800));
  return mockUsers;
};

// 统一出口，根据环境变量选择数据源
export const fetchUsers = async () => {
  if (process.env.REACT_APP_USE_MOCK_DATA === 'true') {
    return fetchUsersFromMock();
  }
  return fetchUsersFromAPI();
};

开发环境默认用模拟数据，上线自动切真实API；如果要在开发时临时测真实接口，改一下.env.development里的值就行，一键生效。

方案2：本地配置文件（适合开发时快速切换） #

如果不想折腾环境变量，直接建个config.js：

// config.js
export const APP_CONFIG = {
  useMockData: true // 改这个布尔值就能切换数据源
};

然后在api.js里引入配置：

import { APP_CONFIG } from '../config';
// ... 其他代码

export const fetchUsers = async () => {
  if (APP_CONFIG.useMockData) {
    return fetchUsersFromMock();
  }
  return fetchUsersFromAPI();
};

开发时改完配置文件刷新页面就切换，特别方便调试。

如果需要模拟带参数的API（比如根据用户ID获取详情），推荐用msw（Mock Service Worker）——它能拦截真实的API请求，返回模拟数据，完全不用改业务代码。

步骤大概是：

1. 安装依赖：npm install msw --save-dev
2. 建mock拦截规则：

// mocks/handlers.js
import { rest } from 'msw';

export const handlers = [
  // 拦截GET /api/users请求
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.delay(800),
      ctx.json([
        { id: 1, name: "Alice", email: "alice@example.com" },
        { id: 2, name: "Bob", email: "bob@example.com" }
      ])
    );
  }),
  // 拦截带参数的GET /api/users/:id请求
  rest.get('/api/users/:id', (req, res, ctx) => {
    const { id } = req.params;
    return res(
      ctx.delay(600),
      ctx.json({ id: Number(id), name: `User ${id}`, email: `user${id}@example.com` })
    );
  })
];

3. 在项目入口注册mock服务：

// src/index.js
import { setupWorker } from 'msw';
import { handlers } from './mocks/handlers';

// 根据环境变量决定是否启动mock
if (process.env.REACT_APP_USE_MOCK_DATA === 'true') {
  const worker = setupWorker(...handlers);
  worker.start();
}

这样业务代码直接写真实API的请求路径，当useMockData为true时，msw会自动拦截请求返回模拟数据；改成false就直接请求后端，完全不用改业务逻辑，体验超丝滑！

• 模拟数据要尽量和真实API的返回格式一致（字段名、数据类型、嵌套结构），不然切换时容易出莫名其妙的bug。
• 模拟数据里可以加一些边缘场景（比如空数组、错误状态码），提前测试业务逻辑的容错性。
• 如果用环境变量，Create React App要求变量必须以REACT_APP_开头，不然不会被注入到代码里。

内容的提问来源于stack exchange，提问作者anonymous13