如何在单个React组件中统一风格整合多个Redux Store？

我太懂你这种在多Redux Store架构下的痛苦了——一会儿用Provider注入，一会儿靠props传Store，还要手动在组件state里写订阅逻辑，代码风格混乱不说，维护起来也容易出错。既然架构师已经定了多Store的方案不能改，那我们可以从统一订阅和获取Store状态的方式入手，把三种零散的操作整合成一致的风格。

下面分两种组件类型给你具体方案，都是基于现有架构的无侵入改造：

一、函数组件：用自定义Hook统一处理订阅 #

函数组件的话，写一个通用的useReduxStore Hook，不管Store是来自Context、props还是全局引用，都用这个Hook来获取状态并自动订阅更新。

1. 实现通用Hook #

import { useEffect, useState } from 'react';
// 自己实现浅比较，避免不必要的组件重渲染
function shallowEqual(objA, objB) {
  if (objA === objB) return true;
  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }
  const keysA = Object.keys(objA);
  if (keysA.length !== Object.keys(objB).length) return false;
  for (const key of keysA) {
    if (!Object.prototype.hasOwnProperty.call(objB, key) || objA[key] !== objB[key]) {
      return false;
    }
  }
  return true;
}

export function useReduxStore(store, selector = state => state) {
  // 初始化状态，支持传入选择器只获取需要的部分
  const [selectedState, setSelectedState] = useState(() => selector(store.getState()));

  useEffect(() => {
    // 订阅Store更新，仅在选中状态变化时更新组件
    const unsubscribe = store.subscribe(() => {
      const newFullState = store.getState();
      const newSelectedState = selector(newFullState);
      if (!shallowEqual(newSelectedState, selectedState)) {
        setSelectedState(newSelectedState);
      }
    });

    // 组件卸载时取消订阅
    return unsubscribe;
  }, [store, selector]);

  return selectedState;
}

2. 组件中统一使用 #

不管你的Store来自哪里，都可以用这个Hook统一处理：

import { useContext } from 'react';
import { useReduxStore } from './hooks';
import Store1Context from './Store1Context';

function MyComponent(props) {
  // 1. 从Context获取的Store（原Provider注入方式）
  const store1 = useContext(Store1Context);
  const userState = useReduxStore(store1, state => state.user);

  // 2. 从props传入的Store
  const cartState = useReduxStore(props.store2, state => state.cart);

  // 3. 全局引用的Store
  const notificationState = useReduxStore(GlobalStore3, state => state.notifications);

  // 现在所有状态的获取方式完全统一了
  return (
    <div>
      <p>用户名：{userState.name}</p>
      <p>购物车数量：{cartState.items.length}</p>
      <p>未读通知：{notificationState.unreadCount}</p>
    </div>
  );
}

二、类组件：用高阶组件（HOC）封装订阅逻辑 #

如果你的项目里还有大量类组件，写一个高阶组件来统一处理多个Store的订阅，把所有Store的状态注入到组件props中，避免手动写subscribe和setState。

1. 实现通用HOC #

import React from 'react';
import { shallowEqual } from 'redux'; // 也可以用上面自己实现的浅比较

function withReduxStores(getStores) {
  return function(WrappedComponent) {
    return class extends React.Component {
      constructor(props) {
        super(props);
        // 根据props获取所有需要的Store
        this.stores = getStores(props);
        // 初始化所有Store的选中状态
        this.state = this.getMergedState();
        this.unsubscribers = [];
      }

      getMergedState() {
        return Object.fromEntries(
          Object.entries(this.stores).map(([key, { store, selector }]) => [
            key,
            selector(store.getState())
          ])
        );
      }

      setupSubscriptions() {
        // 给每个Store添加订阅
        this.unsubscribers = Object.entries(this.stores).map(([key, { store, selector }]) => {
          return store.subscribe(() => {
            const newSelectedState = selector(store.getState());
            if (!shallowEqual(newSelectedState, this.state[key])) {
              this.setState({ [key]: newSelectedState });
            }
          });
        });
      }

      componentDidMount() {
        this.setupSubscriptions();
      }

      componentDidUpdate(prevProps) {
        const prevStores = getStores(prevProps);
        const currentStores = getStores(this.props);
        // 如果Store有变化，重新订阅
        const hasStoreChanged = Object.entries(currentStores).some(
          ([key, current]) => prevStores[key]?.store !== current.store
        );
        if (hasStoreChanged) {
          // 清理旧订阅
          this.unsubscribers.forEach(unsubscribe => unsubscribe());
          // 更新Stores和状态
          this.stores = currentStores;
          this.setState(this.getMergedState());
          // 重新订阅
          this.setupSubscriptions();
        }
      }

      componentWillUnmount() {
        // 清理所有订阅
        this.unsubscribers.forEach(unsubscribe => unsubscribe());
      }

      render() {
        // 把所有Store的状态注入到组件props中
        return <WrappedComponent {...this.props} {...this.state} />;
      }
    };
  };
}

2. 类组件中统一使用 #

import React from 'react';
import { withReduxStores } from './hocs';
import Store1Context from './Store1Context';
import GlobalStore3 from './GlobalStore3';

class MyComponent extends React.Component {
  // 如果需要Context中的Store，用contextType获取
  static contextType = Store1Context;

  render() {
    // 所有状态都统一从props获取
    const { cartState, notificationState } = this.props;
    // Context中的Store状态也可以整合到HOC配置中，这里为示例分开展示
    const userState = this.context.getState().user;

    return (
      <div>
        <p>用户名：{userState.name}</p>
        <p>购物车数量：{cartState.items.length}</p>
        <p>未读通知：{notificationState.unreadCount}</p>
      </div>
    );
  }
}

// 配置需要订阅的Store，支持从props、Context或全局获取
export default withReduxStores(props => ({
  // 从props传入的Store
  cartState: {
    store: props.store2,
    selector: state => state.cart
  },
  // 全局引用的Store
  notificationState: {
    store: GlobalStore3,
    selector: state => state.notifications
  }
}))(MyComponent);

三、进阶：用MultiStoreProvider统一Store的获取入口 #

如果项目里很多组件都需要用到多个Store，可以创建一个全局的MultiStoreProvider，把所有Store都放到Context里，这样组件里不用再分别从props、Context或全局拿Store，统一从MultiStoreContext获取，再配合上面的Hook或HOC使用，风格更统一。

import { createContext, useContext } from 'react';

const MultiStoreContext = createContext();

export function MultiStoreProvider({ stores, children }) {
  return (
    <MultiStoreContext.Provider value={stores}>
      {children}
    </MultiStoreContext.Provider>
  );
}

// 配合Hook使用，获取指定Store
export function useStore(storeKey) {
  const stores = useContext(MultiStoreContext);
  return stores[storeKey];
}

在根组件初始化：

import { MultiStoreProvider } from './MultiStoreProvider';
import Store1 from './Store1';
import Store2 from './Store2';
import Store3 from './Store3';

function App() {
  return (
    <MultiStoreProvider stores={{ store1: Store1, store2: Store2, store3: Store3 }}>
      {/* 你的应用组件 */}
    </MultiStoreProvider>
  );
}

然后组件里就可以统一用useStore拿Store，再用useReduxStore获取状态：

function MyComponent() {
  const store1 = useStore('store1');
  const store2 = useStore('store2');
  const store3 = useStore('store3');

  const userState = useReduxStore(store1, state => state.user);
  const cartState = useReduxStore(store2, state => state.cart);
  const notificationState = useReduxStore(store3, state => state.notifications);

  // ...渲染逻辑
}

这样一来，不管原来的Store是怎么传递的，现在都统一成了“从MultiStore拿Store → 用Hook/HOC订阅状态”的流程，代码风格完全一致，也减少了重复的订阅逻辑。

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