什么时候在react/redux中使用bindActionCreators？
针对bindActionCreators的Redux文档指出：
bindActionCreators的唯一用例是，当您想要将一些操作创建器传递给一个不知道Redux的组件，并且您不想将调度或Redux存储传递给它时。
在使用/需要bindActionCreators的情况下，会有什么示例？
哪种组件不知道Redux
这两种选择的优缺点是什么？
//actionCreator
import * as actionCreators from './actionCreators'
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch)
}vs
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return {
someCallback: (postId, index) => {
dispatch({
type: 'REMOVE_COMMENT',
postId,
index
})
}
}
}回答 10
Stack Overflow用户
发布于 2018-02-06 03:23:45
我不认为最流行的答案实际上解决了这个问题。
下面的所有示例基本上都做了相同的事情，并遵循无“预绑定”的概念。
// option 1
const mapDispatchToProps = (dispatch) => ({
action: () => dispatch(action())
})
// option 2
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(action, dispatch)
})
// option 3
const mapDispatchToProps = {
action: action
}Option #3只是option #1的简写，所以真正的问题是为什么会使用option #1和option #2。我见过在react-redux代码库中使用它们，我发现它相当混乱。
我认为混淆来自于这样一个事实，即react-redux文档中的所有examples都使用bindActionCreators，而bindActionCreators文档(如问题本身所引用的)指出不要使用react-redux。
我猜答案是代码库中的一致性，但我个人更喜欢在需要的时候显式地在分派中包装操作。
Stack Overflow用户
发布于 2017-01-21 02:15:28
在99%的时间里，它作为mapDispatchToProps参数的一部分与React-Redux connect()函数一起使用。它可以在您提供的mapDispatch函数中显式使用，或者如果您使用对象简写语法并将一个包含操作创建器的对象传递给connect，则可以自动使用它。
这个想法是，通过预先绑定操作创建者，你传递给connect()的组件在技术上“不知道”它是连接的--它只知道它需要运行this.props.someCallback()。另一方面，如果您没有绑定操作创建器，并调用了this.props.dispatch(someActionCreator())，那么组件现在“知道”它是连接的，因为它期待props.dispatch的存在。
我在我的博客文章Idiomatic Redux: Why use action creators?中写了一些关于这个主题的想法。
Stack Overflow用户
发布于 2017-09-27 03:17:59
更完整的例子，传递一个充满动作创建者的对象来连接：
import * as ProductActions from './ProductActions';
// component part
export function Product({ name, description }) {
return <div>
<button onClick={this.props.addProduct}>Add a product</button>
</div>
}
// container part
function mapStateToProps(state) {
return {...state};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
...ProductActions,
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Product);https://stackoverflow.com/questions/41754489
复制相似问题
腾讯云开发者
