mapDispatchToProps如何在react-redux中工作

问题描述：

我观察了Redux上的egghead.io教程，觉得我对Redux的尝试能够做什么有所了解，但其实际工作方式对我来说依然神秘。我使用react-redux connect方法实现了Dan的简单计数器应用程序，但是我不太了解我的实现。有两种可能的方式我想：mapDispatchToProps如何在react-redux中工作

没有经过调度：

const mapDispatchToProps = { 
    upIt:() => { 
    return ({type:'INCREMENT'} 
) 
    }, 
    downIt:() => { 
    return({type:'DECREMENT'}) 
    } 
}

传球调度：

const mapDispatchToProps = dispatch => ({ 
    upIt:() => { 
    dispatch({type:'INCREMENT'} 
) 
    }, 
    downIt:() => { 
    dispatch({type:'DECREMENT'}) 
    } 
})

计数器工作使用两种或这两个选项，但我不知道怎么第一个选项（我从来没有调用'dispatch'）管理连接到store.dispatch方法。有什么理由我应该更喜欢一种将方法写在另一种方法上的方法吗？

答

想像为通过相关action creators到您的组件的接口（这些动作创作者出现在您的组件中，并在您的组件中作为道具访问）。

行动创造者是不一样行动。

在终极版中，动作只是一个普通的JavaScript对象，如下面的（它可以有任何你想要的属性，但必须包括type属性）：

{ type: 'INCREMENT' }

这些动作被送到减速器，它处理如何根据动作属性更新状态。

的行动的创建者是功能是调用时将这些行动减速。

所以，在你的例子，upIt和downIt是行动创造者，而{type:'INCREMENT'}和{type:'DECREMENT'}是行动。

以upIt例如：

upIt:() => { 
    return ({type:'INCREMENT'}) 
}

从react-redux的connect()功能将拦截动作从这个动作创作者函数返回，并将其分派到了Redux存储（这将随后通过处理减速器）。

connect功能实现：

connect(mapStateToProps, mapDispatchToProps)(ComponentName)

然而，考虑你可能想从一个单一的行动的创建者派遣多个动作的情况。当一个函数只有一个值return时，这将如何实现？

这就是mapDispatchToProps的dispatch参数进来的地方！它允许您从单个行动创建者调度多个动作。

例如，假设您想在UI中创建一个按钮来递增计数器，则5秒钟后再次递减。你行动的创建者在mapDispatchToProps定义可能是这个样子：

const mapDispatchToProps = dispatch => ({ 
    incrementForFiveSeconds:() => { 
     dispatch({type:'INCREMENT'}); 
     setTimeout(() => { 
      dispatch({type:'DECREMENT'}); 
     }, 5000); 
    }, 
    // other action creators 
})

通知我们如何能够在同一动作的创造者内连续两次调用dispatch功能！

总结：

如果您行动的创建者只会调度一个单个动作，那么您可以使用该return或dispatch()接口。
如果您行动的创建者可能需要派遣多个动作的创造者，则需要使用dispatch()接口。

答

从终极版文档文档：

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps]（对象或功能）：

如果对象被传递，则假定在其内部的各功能是一个 Redux动作创建者。一个具有相同函数名称但具有每个动作创建者包装成一个dispatch调用的对象，因此它们可以被直接调用，将被合并到组件的道具中。如果函数通过，它将被给予dispatch。如果您不想订阅商店更新，请通过null或undefined代替 mapStateToProps。这取决于你返回一个对象，以某种方式使用dispatch以自己的方式绑定动作创建者。（小提示：你可能会使用使用 bindActionCreators() 助手来自Redux。）如果你省略了它，默认实现只需将dispatch注入到你的组件的道具中。如果ownProps是指定为第二个参数，则其值将是传递给您的组件的的道具，并且只要组件接收到新的道具，将重新调用mapDispatchToProps。

在第一种情况

const mapDispatchToProps = { 
    upIt:() => { 
    return ({type:'INCREMENT'} 
) 
    }, 
    downIt:() => { 
    return({type:'DECREMENT'}) 
    } 
}

mapDispatchToProps是一个对象，因此upIt和downIt被假定为是动作的创造者。

在第二种情况：

const mapDispatchToProps = dispatch => ({ 

    upIt:() => { 
     dispatch({type:'INCREMENT'} 
    ) 
     }, 
     downIt:() => { 
     dispatch({type:'DECREMENT'}) 
     } 
    })

mapDispatchToProps是一个功能，因此在其内部的各功能必须被传递给分派的mapDispatchToProps

mapDispatchToProps如何在react-redux中工作

相关推荐