React Redux mapDispatchToProps与this.props.dispatch [英] React Redux mapDispatchToProps vs this.props.dispatch

问题描述

直到现在，我以这种方式使用容器和组件操作:

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

使用mapDispatchToProps函数:

  const mapDispatchToProps =(dispatch)=>{返回 {toggleSidebar:()=>{dispatch(toggleSidebar());}，注销:()=>{dispatch(logout());}}}; 

现在我以这种方式尝试了

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

请，有人可以向我解释这些选项之间的区别吗?

谢谢:)

解决方案

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

您可以使用这些额外的参数根据组件状态(例如，如果禁用了 ，则可能不返回任何绑定操作)或道具(例如，如果存在cleanStorage 在组件本身的道具中，并通过 logout 操作传递它.)

使用 mapDispatchToProps 可使您的代码更整洁和分离.想象一下传递10多个动作并手动绑定它们...消费者组件应该只接受定义的动作，而不是通用的 dispatch ，这样，它减少了与Redux的耦合，并使维护和测试更加容易./p>

通过使用一些高级功能，您可以定义更简单的功能 bind ，在其中您只需将调度功能绑定到动作创建者，例如:

  const bind =>动作=>调度=>对象条目(动作).map(([[key，action])=>; [key，(... args)=> gt dispatch(action(... args)]).reduce((acc，([[key，boundAction]))=>({... acc，[key]:boundAction})，{})connect(mapStateToProps，bind({toggleSidebar，logout})，...)(组件) 

或者只需使用 bindActionCreators(actionCreators，dispatch)减少样板:

从导入

  import {bindActionCreators};连接(mapStateToProps，调度=>bindActionCreators({toggleSidebar，注销}，调度)，...)(成分) 

Until now I used my containers and components actions this way:

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

With the mapDispatchToProps function:

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

Now I tried it this way:

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

Please, can someone explain to me what's the difference between these options?

Thanks :)

解决方案

The base role of mapDispatchToProps is exactly what you do inline in your example, however, it is more flexible as it can accept not only the dispatcher but the target component's state and own props.

You can use these extra parameters to change behavior based on component state (for example if it is disabled then you may return no bound actions) or props (for example, if there is cleanStorage in own props of the component, pass it along the logout action).

Using mapDispatchToProps makes your code cleaner and better separated. Imagine passing 10+ actions and binding them manually... Consumer components should only accept defined actions, not a generic dispatch and by that, it reduces coupling to the Redux and allows for easier maintenance and testing.

By using some advanced features you can define simpler function bind, where you just bind the dispatch function to the action creators, for example like this:

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)

Or just use bindActionCreators(actionCreators, dispatch) to reduce boilerplate:

import { bindActionCreators } from 'redux';

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

这篇关于React Redux mapDispatchToProps与this.props.dispatch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！