如何在React Styleguidist中为每个示例独立配置Redux Store

我来帮你搞定这个问题！在React Styleguidist里让每个代码示例拥有独立的Redux Store其实没那么复杂，核心就是别复用全局Store，给每个示例单独创建全新的Store实例。下面给你几个实用的方案：

方案一：在每个代码块内直接创建独立Store #

这是最直接的方式，每个代码示例都自己创建专属的Store，完全隔离状态。

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from '../path/to/your/rootReducer';
import ConnectionComponent from './ConnectionComponent';

// 为当前示例创建全新的Store实例，可自定义初始状态
const demoStore = createStore(rootReducer, {
  connection: false // 这里的初始状态只对当前示例生效
});

const Demo = () => (
  <Provider store={demoStore}>
    <ConnectionComponent />
  </Provider>
);

export default Demo;

另一个代码块里可以设置不同的初始状态：

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from '../path/to/your/rootReducer';
import ConnectionComponent from './ConnectionComponent';

// 第二个示例的独立Store，初始状态为已连接
const demoStore = createStore(rootReducer, {
  connection: true
});

const Demo = () => (
  <Provider store={demoStore}>
    <ConnectionComponent />
  </Provider>
);

export default Demo;

说明：每个代码块的Store都是全新实例，dispatch动作只会影响当前示例的状态，完全不会干扰其他示例。

方案二：封装可复用的Mock Store高阶组件 #

如果多个示例都需要创建Store，可以封装一个高阶组件（HOC）来减少重复代码，同时保持隔离性。

首先创建一个工具文件：

// src/utils/withMockStore.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from '../rootReducer';

// 接收初始状态，返回一个包裹了独立Store的组件
export const withMockStore = (initialState = {}) => (Component) => () => {
  // 每次调用都生成新的Store实例
  const store = createStore(rootReducer, initialState);
  return (
    <Provider store={store}>
      <Component />
    </Provider>
  );
};

然后在代码块里直接使用：

import React from 'react';
import ConnectionComponent from './ConnectionComponent';
import { withMockStore } from '../utils/withMockStore';

// 示例1：初始未连接状态
const Demo1 = withMockStore({ connection: false })(ConnectionComponent);

export default Demo1;

另一个代码块：

import React from 'react';
import ConnectionComponent from './ConnectionComponent';
import { withMockStore } from '../utils/withMockStore';

// 示例2：初始已连接状态
const Demo2 = withMockStore({ connection: true })(ConnectionComponent);

export default Demo2;

说明：这个方案既保持了代码复用性，又确保每个示例的Store都是独立的，非常适合多个示例的场景。

方案三：Redux Toolkit适配方案 #

如果你用的是Redux Toolkit，只需要把createStore换成configureStore，思路完全一致：

import React from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '../path/to/your/rootReducer';
import ConnectionComponent from './ConnectionComponent';

const demoStore = configureStore({
  reducer: rootReducer,
  preloadedState: { connection: false }
});

const Demo = () => (
  <Provider store={demoStore}>
    <ConnectionComponent />
  </Provider>
);

export default Demo;

关键注意事项 #

• 绝对不要在全局作用域定义Store，必须在每个示例的局部作用域（比如组件函数内部）创建，确保每个示例拿到的都是新实例。
• 组件内部必须通过useSelector/useDispatch或者connect来获取Store，禁止直接导入全局Store，否则隔离会完全失效。

内容的提问来源于stack exchange，提问作者Juan David Arce