如何让宿主应用无需依赖Redux即可使用Redux关联组件？

下面是几种可行的方案，完全满足你不想强制宿主应用依赖Redux的需求：

方案一：内部封装Redux Store，自动注入Provider #

直接在组件内部创建Redux store，并用Redux的Provider包裹核心业务组件，宿主只需直接使用你的组件，完全感知不到Redux的存在。

代码示例： #

// MyComponent.jsx
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
import rootReducer from './reducers';

// 内部创建store，支持传入初始状态让宿主自定义
const createInternalStore = (initialState) => createStore(rootReducer, initialState);

// 核心业务组件，正常使用Redux hooks
const MyComponentCore = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
    </div>
  );
};

// 对外暴露的组件，自动注入Redux Provider
const MyComponent = ({ initialState }) => {
  const store = createInternalStore(initialState);
  return (
    <Provider store={store}>
      <MyComponentCore />
    </Provider>
  );
};

export default MyComponent;

宿主使用方式： #

// 宿主应用无需安装Redux
import MyComponent from './MyComponent';

const App = () => {
  // 可选：传入初始状态
  return <MyComponent initialState={{ count: 5 }} />;
};

方案二：自定义Provider实现多组件状态共享 #

如果需要多个同类型组件共享状态，可以提供自定义的MyComponentProvider，内部管理Redux store，宿主只需在顶层套这个Provider即可。

代码示例： #

// MyComponentProvider.jsx
import { createContext, useContext, useMemo } from 'react';
import { createStore } from 'redux';
import { Provider as ReduxProvider } from 'react-redux';
import rootReducer from './reducers';

const StoreContext = createContext(null);

export const MyComponentProvider = ({ children, initialState }) => {
  // 用useMemo避免重复创建store
  const store = useMemo(() => createStore(rootReducer, initialState), [initialState]);
  return (
    <StoreContext.Provider value={store}>
      <ReduxProvider store={store}>
        {children}
      </ReduxProvider>
    </StoreContext.Provider>
  );
};

// 可选：提供hook让宿主获取内部store（比如监听状态变化）
export const useMyComponentStore = () => {
  const store = useContext(StoreContext);
  if (!store) {
    throw new Error('useMyComponentStore必须在MyComponentProvider内部使用');
  }
  return store;
};

// MyComponent.jsx
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
    </div>
  );
};

export default MyComponent;

宿主使用方式： #

import { MyComponentProvider } from './MyComponentProvider';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyComponentProvider initialState={{ count: 0 }}>
      <MyComponent />
      <MyComponent /> {/* 两个组件共享同一个内部store */}
    </MyComponentProvider>
  );
};

方案三：用React Context + useReducer替代Redux（轻量方案） #

如果组件状态逻辑不复杂，完全可以抛弃Redux，用React原生的Context和useReducer实现状态管理，更轻量且无额外依赖。

代码示例： #

// MyComponentContext.jsx
import { createContext, useContext, useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const MyComponentContext = createContext(null);

export const MyComponentProvider = ({ children, initialState: customInitialState }) => {
  const [state, dispatch] = useReducer(reducer, customInitialState || initialState);
  return (
    <MyComponentContext.Provider value={{ state, dispatch }}>
      {children}
    </MyComponentContext.Provider>
  );
};

export const useMyComponentState = () => {
  const context = useContext(MyComponentContext);
  if (!context) {
    throw new Error('useMyComponentState必须在MyComponentProvider内部使用');
  }
  return context;
};

// MyComponent.jsx
import { useMyComponentState } from './MyComponentContext';

const MyComponent = () => {
  const { state, dispatch } = useMyComponentState();
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
    </div>
  );
};

export default MyComponent;

关键注意事项 #

• 如果你选择方案一或二，要把redux和react-redux列为组件的dependencies（而非peerDependencies），这样宿主安装你的组件时会自动安装这些依赖，无需宿主手动处理。
• 所有Redux相关逻辑都封装在组件内部，宿主完全不需要了解Redux的细节。

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