高阶组件 redux 调度被包装组件 redux 调度覆盖
Higher Order Component redux dispatch being overwritten by wrapped component redux dispatch
下面是高阶组件。 HOC 专门连接到 redux 以访问其中一个动作创建者:importantReduxAction
.
function withExtraStuff (InnerComponent) {
return class Enhancer extends React.Component {
constructor(props){
super(props)
this.importantMethod = this.importantMethod.bind(this)
}
importantMethod(){
//try to call the higher order component's action creator
this.props.importantReduxAction()
}
render(){
return <InnerComponent
{...this.props}
importantMethod={this.importantMethod}
/>
}
}
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({importantReduxAction}, dispatch)
}
return connect(null, mapDispatchToProps, null, {pure: false})(Enhancer)
}
这是将使用 HOC 组件的包装组件。它还将自己连接到 redux 以访问不同的方法:otherReduxAction
.
class ChildComponent extends React.Component {
constructor(props){
super(props)
this.doImportantThing = this.doImportantThing.bind(this)
}
doImportantThing(){
//try to call the higher order component's method (this is where problems occur)
this.props.importantMethod()
//do something with this components dispatch
this.props.otherReduxAction()
}
render(){
return <div>
{this.doImportantThing()}
</div>
}
}
let EnhancedComponent = withExtraStuff(ChildComponent)
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({otherReduxAction}, dispatch)
}
export default connect(null, mapDispatchToProps, null, {pure: false})(EnhancedComponent)
问题发生在我的 HOC 中的 mapDispatchToProps
被 child 覆盖,并且动作创建者:importantReduxAction
永远不会传递到我的 HOC 中。它收到以下错误:
method is undefined
我通过将方法传递到我的 child 组件解决了这个问题,如下所示:
/* CHILD COMPONENT DEFINITION ABOVE */
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({otherReduxAction, importantReduxAction}, dispatch)
}
但是这个解决方案并不是我想要的那样。有没有办法让我的 HOC 合并到它想要与包装组件的动作创建者一起使用的动作创建者中?还是我必须找到解决这个问题的新方法?
TLDR: 使用动作创建器的 HOC 组件包装了也有一个的 child 组件。 HOC action creator 被踢到限制并且从未通过。
您的示例似乎有问题。
function withExtraStuff (InnerComponent) {
return class Enhancer extends React.Component {/* ... */}
// ...
return connect(/* ... */)(Enhancer)
}
您从 HOC return
ing 两次,因此您的 Enhancer
永远不会 connect
ed。
这只是您示例中的错字吗?或者您的代码中是否存在同样的问题?因为那确实会导致您看到的问题。
这里的问题是你需要在高阶组件中合并你的道具。 redux connect 采用第三个参数,它是一个函数 (mergeProps)。该函数采用三个参数。请参阅此处的示例:
function mergeProps(stateProps, dispatchProps, ownProps) {
return {
...stateProps,
...dispatchProps,
...ownProps,
actions: Object.assign({}, dispatchProps.actions, ownProps.actions)
}
}
在我的包装组件中,我像这样设置我的 mapDispatchToProps:
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
...myDefinedActionsForMyComponent,
}, dispatch)
}
}
在我的 HOC 中,我以相同的方式设置了我的 mapDispatchToProps。您遇到的问题可以通过在 HOC(高阶组件)中实施 mergeProps 来解决。如果您只是创建 mergeProps 函数并在控制台记录三个参数,您将看到这些值并可以决定如何最好地连接它们。根据我的设置,我只需对操作进行对象分配。您可能需要做类似的事情。
连接在您的 HOC 中看起来像这样:
return connect(mapStateToProps, mapDispatchToProps, mergeProps)(Wrapper)
下面是高阶组件。 HOC 专门连接到 redux 以访问其中一个动作创建者:importantReduxAction
.
function withExtraStuff (InnerComponent) {
return class Enhancer extends React.Component {
constructor(props){
super(props)
this.importantMethod = this.importantMethod.bind(this)
}
importantMethod(){
//try to call the higher order component's action creator
this.props.importantReduxAction()
}
render(){
return <InnerComponent
{...this.props}
importantMethod={this.importantMethod}
/>
}
}
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({importantReduxAction}, dispatch)
}
return connect(null, mapDispatchToProps, null, {pure: false})(Enhancer)
}
这是将使用 HOC 组件的包装组件。它还将自己连接到 redux 以访问不同的方法:otherReduxAction
.
class ChildComponent extends React.Component {
constructor(props){
super(props)
this.doImportantThing = this.doImportantThing.bind(this)
}
doImportantThing(){
//try to call the higher order component's method (this is where problems occur)
this.props.importantMethod()
//do something with this components dispatch
this.props.otherReduxAction()
}
render(){
return <div>
{this.doImportantThing()}
</div>
}
}
let EnhancedComponent = withExtraStuff(ChildComponent)
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({otherReduxAction}, dispatch)
}
export default connect(null, mapDispatchToProps, null, {pure: false})(EnhancedComponent)
问题发生在我的 HOC 中的 mapDispatchToProps
被 child 覆盖,并且动作创建者:importantReduxAction
永远不会传递到我的 HOC 中。它收到以下错误:
method is undefined
我通过将方法传递到我的 child 组件解决了这个问题,如下所示:
/* CHILD COMPONENT DEFINITION ABOVE */
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({otherReduxAction, importantReduxAction}, dispatch)
}
但是这个解决方案并不是我想要的那样。有没有办法让我的 HOC 合并到它想要与包装组件的动作创建者一起使用的动作创建者中?还是我必须找到解决这个问题的新方法?
TLDR: 使用动作创建器的 HOC 组件包装了也有一个的 child 组件。 HOC action creator 被踢到限制并且从未通过。
您的示例似乎有问题。
function withExtraStuff (InnerComponent) {
return class Enhancer extends React.Component {/* ... */}
// ...
return connect(/* ... */)(Enhancer)
}
您从 HOC return
ing 两次,因此您的 Enhancer
永远不会 connect
ed。
这只是您示例中的错字吗?或者您的代码中是否存在同样的问题?因为那确实会导致您看到的问题。
这里的问题是你需要在高阶组件中合并你的道具。 redux connect 采用第三个参数,它是一个函数 (mergeProps)。该函数采用三个参数。请参阅此处的示例:
function mergeProps(stateProps, dispatchProps, ownProps) {
return {
...stateProps,
...dispatchProps,
...ownProps,
actions: Object.assign({}, dispatchProps.actions, ownProps.actions)
}
}
在我的包装组件中,我像这样设置我的 mapDispatchToProps:
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
...myDefinedActionsForMyComponent,
}, dispatch)
}
}
在我的 HOC 中,我以相同的方式设置了我的 mapDispatchToProps。您遇到的问题可以通过在 HOC(高阶组件)中实施 mergeProps 来解决。如果您只是创建 mergeProps 函数并在控制台记录三个参数,您将看到这些值并可以决定如何最好地连接它们。根据我的设置,我只需对操作进行对象分配。您可能需要做类似的事情。
连接在您的 HOC 中看起来像这样:
return connect(mapStateToProps, mapDispatchToProps, mergeProps)(Wrapper)