我正在使用webpack开发一个样例react-redux应用程序
webpack.config.js
var path=require('path');
const webpack = require('webpack');
module.exports= {
entry : './src/app.js',
output : {
filename : 'bundle.js',
path : path.resolve(__dirname,'public')
},
watch: true,
module : {
rules : [
{
test :/\.js$/,
exclude: /node_modules/,
loader : 'babel-loader',
query : {
"presets": ["@babel/preset-env","@babel/preset-react"]
}
}
]
}
}
bookList.js
"use strict"
import React from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import {getBooks} from '../../actions/booksAction';
import {Grid, Col, Row, Button} from 'react-bootstrap';
import bookItem from './bookItem';
class BooksList extends React.Component
{
componentDidMount(){
this.props.getBooks()
}
render()
{
const booksList = this.props.books.map((booksArr)=> {
return (
<Col xs={12} sm={6} md={4} key={booksArr.id}>
testing
</Col>
)
})
return (
<Grid>
{booksList}
</Grid>
)
}
}
function mapStateToProps(state){
// which data to pass to react component
return{
books: state.books.books
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({getBooks:getBooks}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(BooksList);
index.html（还将在其中加载网格的主页）
<html>
<head>
<title>
Hello Redux
</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
</body>
<script src="bundle.js"></script>
</html>
错误bundle.js：9错误：最小化React错误＃130；请访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=以获取完整消息，或使用非最小化的dev环境获取完整错误和其他有用的警告。（bundle.js：9）
我已经安装了引导程序，是否需要在webconfig中编写任何内容？谁能解决我的问题
我尝试在webconfig.js的预设中添加'style-loader'，'css-loader'，但给出了错误
我建议不要使用bindActionCreator，docs也建议不要与redux一起使用。这具有误导性，因为redux文档中的示例有些过时并且仍然使用bindActionCreator。有关更多信息，请参见here。
在您的情况下，由于您已经导入了操作，因此不需要使用bindActionCreator。您可以简单地执行以下操作
function mapStateToProps(state){
// which data to pass to react component
return{
books: state.books.books
}
}
export default connect(mapStateToProps, {getBooks})(BooksList);
至于您得到的错误，是因为您尝试使用的组件之一未定义。我注意到您正在使用Grid，请尝试在引导程序的library中使用其他组件。在grid docs中，您可以尝试使用Container，Row和Col的组合来创建网格系统。见下文。
<Container fluid="md">
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
如果仍然存在问题，请尝试使用div进行操作，看看是否可行。未定义的组件可能是依赖版本不匹配的结果。您可以尝试删除node_modules并重新安装react-bootstrap.