Question

到目前为止，我以这种方式使用了我的容器和组件：

<Header btnMnuAction={this.props.toggleSidebar} logout={this.props.logout}/>

使用mapDispatchToProps函数：

const mapDispatchToProps = (dispatch) => {
    return {
        toggleSidebar: () => {
            dispatch(toggleSidebar());
        },
        logout: () => {
            dispatch(logout());
        }
    }
};

现在我尝试了这样：

<Header btnMnuAction={() => this.props.dispatch(toggleSidebar())} logout={() => this.props.dispatch(logout())} >

请有人向我解释这些选项之间的区别是什么？

谢谢：）

Answer 1

当您使用connect中的redux并使用mapDispatchToProps时，mapDispatchToProps返回的函数可用作道具，例如在第一种情况下

const mapDispatchToProps = (dispatch) => {
    return {
        toggleSidebar: () => {
            dispatch(toggleSidebar());
        },
        logout: () => {
            dispatch(logout());
        }
    }
};

通过道具，您可以访问toggleSidebar和logout，这些内部会在其上定义调度。

在第二种情况下，如果您未将第二个参数传递给connect，则默认情况下会使dispatch可用，然后您可以使用dispatch调用该操作

所以这些只是两种不同的方式来实现相同的结果，并在内部做同样的事情。

Answer 2

mapDispatchToProps的基本角色正是您在示例中的内联角色，但是，它更灵活，因为它不仅可以接受调度程序，还可以接受目标组件的状态和自己的道具。

您可以使用这些额外参数来更改基于组件状态的行为（例如，如果它是disabled，那么您可以不返回绑定操作）或道具（例如，如果有cleanStorage拥有组件的道具，沿着logout动作传递它。

使用mapDispatchToProps可让您的代码更清晰，更好地分开。想象一下，传递10个以上的动作并手动绑定它们......消费者组件应该只接受已定义的动作，而不是通用的dispatch，这样就减少了与Redux的耦合，并且更容易维护和测试。

通过使用一些高级功能，您可以定义更简单的函数bind，您只需将调度函数绑定到动作创建器，例如：

const bind => actions => dispatch => 
  Object.entries(actions)
  .map(([key, action]) => [key, (...args) => dispatch(action(...args)])
  .reduce((acc, ([key, boundAction]) => ({...acc, [key]: boundAction}), {})

connect(mapStateToProps, bind( { toggleSidebar, logout } ), ...)(Component)

或者只使用bindActionCreators(actionCreators, dispatch)来减少样板：

import { bindActionCreators } from 'redux';

connect(
  mapStateToProps,
  dispatch => bindActionCreators( { toggleSidebar, logout }, dispatch),
  ...
)(Component)

Answer 3

实际上，没有显着差异。我能想到的唯一区别是，每次调用render方法时，第一种方法都会创建一个新的内联函数。除此之外，这些只是做同样事情的不同方式。

mapDispatchToProps还有另外一种编码和清洁方法。如果你只是在mapDispatchToProps中的调度调用中调用一个函数，你可以一起避免它，并直接将对象中的方法作为connect方法的第二个参数传递。

connect(mapStateToProps, {toggleSidebar, logout})(Component)

React Redux mapDispatchToProps vs this.props.dispatch

3 个答案: