React新手技术问询：类库与宿主应用同时配置Redux Store的可行性及相关疑问

作为经常处理类库与宿主应用集成的开发者，我来帮你理清这些问题：

1. 两个Redux Store能否独立存在？会不会冲突？ #

先给你吃个定心丸：完全可以独立存在，不会天然冲突。Redux的Store本质就是独立的JavaScript对象，只要你在类库和宿主应用中分别实例化不同的Store（比如类库创建libraryStore，宿主创建appStore），它们就是完全隔离的，各自管理自己的状态。

你测试时出现“加载类库Store后宿主Store无法加载”的问题，大概率是集成方式出了问题，常见原因包括：

• 类库的组件没有套自己的<Provider>：如果类库组件直接放在宿主的<Provider>内部，会默认使用宿主的Store，而非类库自己的；
• Store实例被意外覆盖：比如代码中不小心把libraryStore赋值给了宿主的Store变量，或者类库的Store采用了单例模式，导致宿主创建Store时复用了类库的实例；
• 重复依赖Redux：如果类库打包时把Redux打包进了产物，宿主又单独安装了Redux，可能导致出现两个Redux实例，引发奇怪的冲突（解决方法是把Redux设为类库的peerDependency，让宿主统一提供）。

正确的隔离方式示例：

// 类库代码
import { createStore, Provider } from 'redux';
import libraryReducer from './libraryReducers';

// 类库独立创建Store
export const libraryStore = createStore(libraryReducer);

// 类库根组件自带Provider，确保内部组件用自己的Store
export function LibraryRoot() {
  return (
    <Provider store={libraryStore}>
      {/* 类库内部组件 */}
    </Provider>
  );
}

// 宿主应用代码
import { createStore, Provider } from 'redux';
import appReducer from './appReducers';
import { LibraryRoot } from 'your-library';

// 宿主独立创建Store
const appStore = createStore(appReducer);

function App() {
  return (
    <Provider store={appStore}>
      {/* 宿主自有组件 */}
      <LibraryRoot /> {/* 类库内部有自己的Provider，会隔离外层Store */}
    </Provider>
  );
}

2. 能否共享Reducers？宿主能否向类库Store发送dispatch？ #

这两个需求都能实现，具体方式如下：

• 共享Reducers：可以互相导出Reducers进行组合。比如类库导出自己的libraryReducer，宿主在创建Store时用combineReducers把它和自身的Reducers合并；反过来宿主也可以把Reducers提供给类库。注意一定要给action type加命名空间（比如类库用'LIBRARY/UPDATE_DATA'，宿主用'APP/UPDATE_DATA'），避免action触发错误的Reducer。
• 宿主向类库Store dispatch：只要能拿到类库的Store实例就行。类库把libraryStore导出后，宿主直接import并调用libraryStore.dispatch()即可：

// 宿主代码示例
import { libraryStore } from 'your-library';

// 直接触发类库的action
libraryStore.dispatch({ 
  type: 'LIBRARY/DO_SOMETHING', 
  payload: '需要传递的数据' 
});

3. 测试失败的排查建议 #

针对你遇到的“类库Store加载后宿主Store无法加载”的问题，可以按以下步骤排查：

• 检查Provider嵌套：确认类库的根组件是否包裹了自己的<Provider>，且传入的是类库自己的Store；
• 检查Store实例：打印appStore和libraryStore的引用，看是否是同一个对象；
• 检查依赖配置：查看类库的package.json，确保Redux是peerDependency而非dependency，避免重复打包；
• 检查action type：如果有同名action type，可能导致状态更新混乱，误以为Store没加载。

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