[英]How to use a connected-to-Redux-Higher-Order-Component inside a Component which is also connected to Redux
I am trying to wrap a Container
which uses Redux
with a HOC
, which also uses Redux
, taking me to the following error:我正在尝试包装一个使用
Redux
和HOC
的Container
,它也使用Redux
,导致出现以下错误:
TypeError: Object(...) is not a function
> 112 | export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))
I have been trying to figure it out on my own and I guess that the solution has something to do with the use of compose
from redux
when exporting either my HOC
or my Container
.我一直在尝试自己解决这个问题,我猜这个解决方案与在导出我的
HOC
或我的Container
时使用来自redux
的compose
有关。
I will post the whole HOC
here and just the container's
exporting part right below the HOC
block.我将在此处发布整个
HOC
,并仅在HOC
块下方发布container's
导出部分。
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)
now the export
part of my Container
called VeggieBuilder
现在我
Container
的export
部分称为VeggieBuilder
export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))
If remove the connection
with Redux
on the export
of my HOC
the error disappears.如果在我的
HOC
export
时删除与Redux
的connection
,错误就会消失。
Thanks in advance to all.在此先感谢大家。
If any additional info is needed here, I will edit the question accordingly.如果此处需要任何其他信息,我将相应地编辑问题。
You can modify your HOC this way:您可以这样修改您的 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;
Calling connect
with mapState
and mapDispatch
will return a function that expects a react component as an argument.使用
mapState
和mapDispatch
调用connect
将返回一个 function,它需要一个 React 组件作为参数。
So when you use export default connect(mapStateToProps, mapActionsToProps)(withError)
note that withError
is not a react component but instead it's a function that returns a react component.因此,当您使用
export default connect(mapStateToProps, mapActionsToProps)(withError)
,请注意withError
不是反应组件,而是返回反应组件的 function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.