Я создаю HOC, чтобы соединить контейнер и представительский компонент.
Я использую веб-пакет для сборки как на этапе разработки, так и на производстве.
Пакет экспортирует функцию, которая возвращаетКомпонент response-redux connect
На удаленном уровне все работает как положено.Когда я собрал пакет и ссылку для тестирования в производственной сборке, я получил
Не удалось найти «store» в контексте «Connect (NameComponentPres)».Либо оберните корневой компонент в <Provider>
, либо передайте пользовательский поставщик контекста React в <Provider>
и соответствующего потребителя контекста React в Connect (NameComponentPres) в параметрах соединения.
я недумаю, что это проблема с реакцией, потому что она работает на разработке.
это моя конфигурация
webpack.config.js
const path = require("path");
const outputPath = process.env.BUILD
? path.resolve("./build")
: path.resolve("./test");
const testConfig = {
mode: "development",
entry: "./demo/index.js",
devtool: "inline-source-map",
externals: "./build/redux-simple-container.js",
output: {
path: outputPath,
filename: "index.js"
},
module: {
rules: [
{
loader: "babel-loader",
include: [path.resolve("./demo")]
}
]
}
};
const buildConfig = {
entry: "./src/ReduxSimpleContainer.js",
mode: "production",
output: {
path: outputPath,
filename: "redux-simple-container.js",
libraryTarget: "commonjs2"
},
externals: ["react", "react-dom"],
module: {
rules: [
{
test: /\.js?$/,
use: "babel-loader",
exclude: /(node_modules)/
}
]
}
};
module.exports = process.env.BUILD ? buildConfig : testConfig;
.babelrc
{
"presets": [["airbnb", { "modules": false }]],
"plugins": ["transform-object-assign"]
}
. / Src / ReduxSimpleContainer.js
import { connect } from "react-redux";
const ReduxSimpleContainer = (actions, stateRequested, Component) => {
....
....
return connect(
mapStateToProps,
mapDispatchToProps
)(Component);
};
export default ReduxSimpleContainer;