无法使用 react-redux 的连接功能答案

【问题标题】：Cannot use connect function from react-redux无法使用 react-redux 的连接功能
【发布时间】：2018-05-14 02:14:09
【问题描述】：

我一直在尝试将 redux 与 material-ui 中的 appbar 组件一起使用。但无法正确使用连接功能。

控制台中显示“无法将类作为函数调用”错误消息。

我正在使用 react 16.1.1 与 redux 3.7.2 和 react-redux 5.0.6

让我知道如何在这种情况下使用连接功能。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import {connect} from 'react-redux';
import * as dataTableAction from '../actions/dataTableAction';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';

const styles = theme => ({
    root: {
        width: '100%'
    },
    flex: {
        flex: 1
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20
    }
});


function ButtonAppBar(props) {
    const { classes } = props;
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
                        <MenuIcon />
                    </IconButton>
                    <Typography type="title" color="inherit" className={classes.flex}>
                        Home
                    </Typography>
                    <Button color="inherit"
                            onClick={this.props.dispatch(dataTableAction.createDataTable(this.state.dataTable))}>
                        Change state
                    </Button>
                </Toolbar>
            </AppBar>
        </div>
    );
}

ButtonAppBar.propTypes = {
    classes: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
    return{
        dataTable: state.dataTable
    }
}


export default withStyles(styles)(connect(mapStateToProps))(ButtonAppBar);

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

你需要在调用connect之前注入样式

const styledComponent = withStyles(styles)(ButtonAppBar);
export default connect(mapStateToProps)(styledComponent);

您也可以使用compose:

import compose from 'recompose/compose';

export default compose(
  withStyles(styles),
  connect(mapStateToProps, null)
)(ButtonAppBar);

查看React Material UI - Export multiple higher order components了解更多信息

【讨论】：

【解决方案2】：

没有 Compose 或 recompose，您可以在下面使用它

export default withStyles(styles)(connect(mapStateToProps) (ButtonAppBar));

【讨论】：