У меня есть компонент, который загружается динамически, что-то вроде этого:
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 активных магазина).Хранилище создается с помощью createStore из'act-redux '.
Может кто-нибудь сказать, почему 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' я пытаюсь загрузить комплект 'киоска'.Это создает 2 магазина.Это имеет смысл, поскольку в обоих индексных файлах пакетов в верхней части есть следующее:
import store from './store'
и store.js
определяется как:
...
export default createStore(reducer, middleware)
С редукторами проблем нет, так как онивсе включено в обе связки.Обратите внимание, что это не SPA, а устаревшее приложение, в React которого есть некоторые компоненты.