首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >什么时候在react/redux中使用bindActionCreators?

什么时候在react/redux中使用bindActionCreators?
EN

Stack Overflow用户
提问于 2017-01-20 09:11:50
回答 10查看 54K关注 0票数 97

针对bindActionCreators的Redux文档指出:

bindActionCreators的唯一用例是,当您想要将一些操作创建器传递给一个不知道Redux的组件,并且您不想将调度或Redux存储传递给它时。

在使用/需要bindActionCreators的情况下,会有什么示例?

哪种组件不知道Redux

这两种选择的优缺点是什么?

代码语言:javascript
复制
//actionCreator
import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}

vs

代码语言:javascript
复制
function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispatchToProps(dispatch) {
  return {
    someCallback: (postId, index) => {
      dispatch({
        type: 'REMOVE_COMMENT',
        postId,
        index
      })
    }
  }
}
EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2018-02-06 03:23:45

我不认为最流行的答案实际上解决了这个问题。

下面的所有示例基本上都做了相同的事情,并遵循无“预绑定”的概念。

代码语言:javascript
复制
// 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。

我猜答案是代码库中的一致性,但我个人更喜欢在需要的时候显式地在分派中包装操作。

票数 64
EN

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?中写了一些关于这个主题的想法。

票数 48
EN

Stack Overflow用户

发布于 2017-09-27 03:17:59

更完整的例子,传递一个充满动作创建者的对象来连接:

代码语言:javascript
复制
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);
票数 19
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41754489

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档