[英]React Redux mapDispatchToProps vs this.props.dispatch
Until now I used my containers and components actions this way: 到现在为止,我用这种方式使用了我的容器和组件:
<Header btnMnuAction={this.props.toggleSidebar} logout={this.props.logout}/>
With the mapDispatchToProps function: 使用mapDispatchToProps函数:
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 :) 谢谢 :)
When you use connect
from redux
and make use of mapDispatchToProps
, the functions returned by the mapDispatchToProps
are available as props, for example in the first case 当您使用
connect
从redux
和利用mapDispatchToProps
,用返回的功能mapDispatchToProps
可作为道具,例如,在第一种情况下
const mapDispatchToProps = (dispatch) => {
return {
toggleSidebar: () => {
dispatch(toggleSidebar());
},
logout: () => {
dispatch(logout());
}
}
};
From the props you will have access to toggleSidebar
and logout
, which internally have the dispatch defined on them. 从道具中您可以访问
toggleSidebar
和logout
,它们在内部具有在其上定义的调度。
In the second case, if you don't pass the second argument to connect
, it makes the dispatch
available to you by default and then you can call the action using dispatch
在第二种情况下,如果您没有将第二个参数传递给
connect
,则默认情况下会使dispatch
可用,然后您可以使用dispatch
调用该操作
So these are just two different ways to achieve the same result and internally doing the same thing. 所以这些只是实现相同结果和内部做同样事情的两种不同方式。
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. mapDispatchToProps
的基本角色正是您在示例中内联的内容,但是,它更灵活,因为它不仅可以接受调度程序,还可以接受目标组件的状态和自己的道具。
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). 您可以使用这些额外的参数来更改基于组件状态的行为(例如,如果它被
disabled
那么您可以不返回绑定的操作)或道具(例如,如果组件的自己的道具中有cleanStorage
,则沿着logout
传递它行动)。
Using mapDispatchToProps
makes your code cleaner and better separated. 使用
mapDispatchToProps
可以使您的代码更清晰,更好地分离。 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. 想象一下,传递10多个动作并手动绑定它们......消费者组件应该只接受已定义的动作,而不是通用的
dispatch
并且通过它,它减少了与Redux的耦合,并允许更容易的维护和测试。
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: 通过使用一些高级功能,您可以定义更简单的函数
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)
Or just use bindActionCreators(actionCreators, dispatch) to reduce boilerplate: 或者只使用bindActionCreators(actionCreators,dispatch)来减少样板:
import { bindActionCreators } from 'redux';
connect(
mapStateToProps,
dispatch => bindActionCreators( { toggleSidebar, logout }, dispatch),
...
)(Component)
Actually, there is no significant difference. 实际上,没有显着差异。 Only difference I can think of is that the first approach create a new inline function each time render method get called.
我能想到的唯一区别是,每次调用render方法时,第一种方法都会创建一个新的内联函数。 Other than that, those are just different ways to do the same thing.
除此之外,这些只是做同样事情的不同方式。
There is another less coding and cleaner approach for mapDispatchToProps
. mapDispatchToProps
还有另一种编码和清洁方法。 If you only just call a function inside the dispatch call in mapDispatchToProps
you can avoid it all together and directly pass your methods in a object as the second argument of connect
method. 如果您只是在
mapDispatchToProps
调用dispatch调用中的mapDispatchToProps
,则可以将它们全部放在一起,并直接将对象中的方法作为connect
方法的第二个参数传递。
connect(mapStateToProps, {toggleSidebar, logout})(Component)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.