javascript - React - 配置商店获取需要未定义的错误
问题描述
我创建了 configureStore.dev.js 文件来为我的 react-redux 应用程序配置商店。下面是我的 configureStore.dev.js 文件代码。
我收到“const nextRootReducer = require('../reducers').default;”的“要求未定义”错误。
我怎样才能重写这部分来解决这个问题?
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import StockApp from '../reducers';
import DevTools from '../containers/DevTools';
const createDevStoreWithMiddleware = compose(
applyMiddleware(thunk),
applyMiddleware(createLogger()),
DevTools.instrument()
)(createStore);
export default function configureStore() {
const store = createDevStoreWithMiddleware(StockApp);
// enable webpack hot module replacement for reducers
if (module.hot) {
module.hot.accept('../reducers', () => {
// eslint-disable-next-line
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
这是我的 webpack.config.js:
// We are using node's native package 'path'
// https://nodejs.org/api/path.html
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
// Constant with our paths
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js'),
};
// Webpack configuration
module.exports = {
entry: path.join(paths.JS, 'app.js'),
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.SRC, 'index.html'),
}),
new ExtractTextPlugin('style.bundle.css'),
],
// We are telling webpack to use "babel-loader" for .js and .jsx files
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
}),
},
{
test: /\.(png|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
// Enable importing JS files without specifying their's extenstion -> ADDED IN THIS STEP
//
// So we can write:
// import MyComponent from './my-component';
//
// Instead of:
// import MyComponent from './my-component.jsx';
resolve: {
extensions: ['.js', '.jsx'],
},
target: 'node',
externals: [nodeExternals()],
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
},
// Dev server configuration -> ADDED IN THIS STEP
// Now it uses our "src" folder as a starting point
devServer: {
contentBase: paths.SRC,
},
};
谁能帮我解决这个问题?
谢谢你。
解决方案
希望您使用的是 Babel 6+,您可以替换此代码:
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
有了这个:
store.replaceReducer('.default')
没必要要求。希望能帮助到你。
推荐阅读
- r - 创建一个新列,该列采用 R 中另一列的初始值
- reactjs - 如果登录后我有来自后端的令牌,如何在导航栏上显示用户名和注销选项?
- ios - Swift 包管理器使包依赖于远程 XCFramework
- android - 小米米 A1(和其他)上的 USB 接口
- javascript - extraReducers 执行的顺序是什么,在 reducer 之前还是之后?
- upgrade - 我无法在未登录的情况下查看 sitefinity 前端网页?
- powershell - 压缩归档任务在 SSIS 中失败,文件为 1.25GB
- javascript - 是导出顶级变量引用 javascript 中的副作用
- typescript - 如何以编程方式获取变量的类型并将其用作函数参数的类型?
- c - 使用 vcpkg 和 VisualStudio 时 SDL2 的链接器错误