Question

我有一个正在动态加载的组件，如下所示：

LoadScript("path/to/component.bundle.js", () => {
    let comp = getComp()
    ReactDOM.render(<Provider store={store}>
           {comp}
    </Provider>, container)
})

和component.js中的

：

export function getComp() {
    return <MyComponent />
}

但是，MyComponent无权访问商店（如果未动态加载，则可以使用）。如果我将其更改为：

export function getComp() {
    return <Provider store={store}><MyComponent /></Provider>
}

然后它可以工作，但是商店似乎并没有真正关联（例如，如果有2个商店处于活动状态）。该商店是通过'react-redux'中的createStore创建的。

谁能告诉我MyComponent为什么没有正确接收存储/提供程序上下文？谢谢！

更新：

我相信问题在于我正在使用代码拆分功能，并且无法将两个捆绑包一起加载。

在我的webpack.config.js中，我有：

entry: {
    admin: './js/index.admin.js',
    kiosk: './js/index.kiosk.js'
},
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'window',
},
optimization: {
    splitChunks: {
        chunks: 'all',
        maxInitialRequests: 2
    }
}

然后，从“ admin”尝试加载“ kiosk”捆绑包。这将创建2家商店。这是有道理的，因为两个捆绑包索引文件的顶部都有以下内容：

import store from './store'

和store.js定义为：

...
export default createStore(reducer, middleware)

Reducer没问题，因为它们都包含在两个捆绑软件中。请注意，这不是SPA，而是一个在React中具有某些组件的旧版应用程序。

Answer 1

您可以导出一个函数，而不是导出createStore方法，该函数可以创建一个不存在的商店，或者返回一个已经存在的实例。

类似-

let instance;

export default getStore = () => {
  if(instance) {
    return instance;
  } else {
    instance = createStore(reducer, middleware);
    return instance;
  }
}
// might need to improve this to eliminate race conditions, 
// or explicitly create the store in this module, 
// and only allow getting an already created store.

您还可以检查捆绑包本身是否每个都有redux的副本。 [我不确定多个入口点将如何处理]。

我今天遇到了一个问题，即动态加载的模块无法访问显然是该组件的祖先的提供程序。
问题在于动态添加的模块具有它自己的lib副本，而不是使用宿主应用程序的版本。

反应：将上下文传递给动态加载的组件

1 个答案: