React引入带Redux Store的NPM包后useSelector报错问题排查

开发了一个集成Redux Store的React NPM包，将其引入到另一个React Redux项目后，出现了两个独立的Redux Store（项目自身的Store和NPM包的Store）。访问NPM包中使用Redux的组件时，useSelector抛出undefined错误，具体信息为：

Page2.js:21 Uncaught TypeError: Cannot read properties of undefined (reading 'allPersonaList')

其中allPersonaList是Redux存储中的容器。尝试过嵌套Provider、自定义Context和Hook，但问题仍未解决。以下是相关代码及依赖配置：

相关代码与依赖配置 #

主项目Store导入代码 #

import store from './redux';// 主应用的store
import { store_artifact } from '@testFeed/azureartifactfeed';// NPM包的store

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store_artifact}>
      <Provider store={store}>
        <App />
      </Provider>
    </Provider>
  </React.StrictMode>
);

NPM包的package.json依赖 #

"dependencies": {
    "@babel/cli": "^7.23.0",
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "@reduxjs/toolkit": "^1.9.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

主项目的package.json依赖 #

"dependencies": {
    "@testFeed/azureartifactfeed": "^0.1.46",
    "@azure/msal-react": "^1.5.3",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "msal": "^1.4.17",
    "react": "^18.2.0",
    "react-avatar": "^5.0.3",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
    "reactflow": "^11.6.0",
    "router": "^1.3.7",
    "sass": "^1.58.3",
    "uuidv4": "^6.2.13",
    "web-vitals": "^2.1.4"
  },

尝试的自定义Context代码 #

const store1Context = React.createContext();
const store2Context = React.createContext();

root.render(
  <Provider store={store} context={store1Context}>
    <Provider store={store_artifact} context={store2Context}>
      <App />
    </Provider>
  </Provider>
);


export const useStore1Dispatch = createDispatchHook(store1Context);
export const useStore1Selector = createSelectorHook(store1Context);

export const useStore2Dispatch = createDispatchHook(store2Context);
export const useStore2Selector = createSelectorHook(store2Context);

内容的提问来源于stack exchange，提问作者Ashwini Kumar Saxena