如何在还连接到Redux的组件中使用连接到Redux-Higher-Order-Component的组件

问题描述 投票:0回答:1

[我正在尝试将使用ContainerRedux与也使用HOCRedux换行,将我带到以下错误:

TypeError: Object(...) is not a function
> 112 | export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))

我一直在尝试自己解决问题,我想该解决方案与导出我的composeredux时使用HOC中的Container有关。

我将在此处发布整个HOC,仅发布container's块正下方的HOC导出部分。

import React, {Fragment} from "react";
import Modal from "../../UI/Modal/Modal";
import { connect } from 'react-redux'
import * as actionCreators from  '../../../store/actions/indexActions'

const withError = WrappedComponent => {
    return props => {
        return<Fragment>
            <Modal show={props.error} modalCanceled={() => props.onResetError()}>
                {props.error && props.error}
            </Modal>
            <WrappedComponent {...props} />
        </Fragment>
    }
}

const mapStateToProps = state => {
    return {
        error: state.httpReqReducer.errorMessage
    }
}

const mapActionsToProps = dispatch => {
    return {
        onResetError: () => dispatch(actionCreators.resetError())
    }
}

export default connect(mapStateToProps, mapActionsToProps)(withError)

现在我的exportContainer部分称为VeggieBuilder

export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))

如果删除connectionRedux上的exportHOC,则错误消失。

先谢谢大家。

如果这里需要任何其他信息,我将相应地编辑问题。

reactjs redux react-redux
1个回答
0
投票

您可以通过这种方式修改您的HOC:

import React, { Fragment } from "react";
import Modal from "../../UI/Modal/Modal";
import { connect } from 'react-redux'
import * as actionCreators from '../../../store/actions/indexActions'

const withError = WrappedComponent => {
  const wrappedComp = props => {
    return <Fragment>
      <Modal show={props.error} modalCanceled={() => props.onResetError()}>
        {props.error && props.error}
      </Modal>
      <WrappedComponent {...props} />
    </Fragment>
  }

  const mapStateToProps = state => {
    return {
      error: state.httpReqReducer.errorMessage
    }
  }

  const mapActionsToProps = dispatch => {
    return {
      onResetError: () => dispatch(actionCreators.resetError())
    }
  }

  return connect(mapStateToProps, mapActionsToProps)(wrappedComp);
}

export default withError;
© www.soinside.com 2019 - 2024. All rights reserved.