Skip to content

Commit 5b1a151

Browse files
ben-rogersonDianaSuvorova
authored andcommitted
Improve mapDispatchToProps-prefer-shorthand text + examples
This example needed a couple of updates to improve the readability. Plus the docs link + extract was out of date.
1 parent 54b499d commit 5b1a151

File tree

1 file changed

+13
-7
lines changed

1 file changed

+13
-7
lines changed
Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
11
# Enforces that mapDispatchToProps uses a shorthand method to wrap actions in dispatch calls whenever possible. (react-redux/mapDispatchToProps-prefer-shorthand)
22

3-
>[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.
3+
>...`connect` supports an “object shorthand” form for the `mapDispatchToProps` argument: if you pass an object full of action creators instead of a function, `connect` will automatically call bindActionCreators for you internally. We recommend always using the “object shorthand” form of `mapDispatchToProps`, unless you have a specific reason to customize the dispatching behavior.
44
5-
[source](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
5+
[source](https://github.com/reduxjs/react-redux/blob/master/docs/using-react-redux/connect-dispatching-actions-with-mapDispatchToProps.md#defining-mapdispatchtoprops-as-an-object)
66

77
## Rule details
88

9-
The following pattern is considered incorrect:
9+
The following patterns are considered incorrect:
1010

1111
```js
1212
const mapDispatchToProps = (dispatch) => ({
1313
action: () => dispatch(action())
1414
})
15-
16-
// it should use equivalent shorthand wrapping instead:
17-
// const mapDispatchToProps = {action}
15+
export default connect(null, mapDispatchToProps)(Component)
1816
```
1917

2018
```js
2119
const mapDispatchToProps = (dispatch) => ({
2220
action: () => dispatch(action()),
2321
action1: (arg1, arg2) => dispatch(action(arg1, arg2))
2422
})
23+
export default connect(null, mapDispatchToProps)(Component)
2524
```
2625

2726
The following patterns are considered correct:
2827

2928

3029
```js
31-
const mapDispatchToProps = {action}
30+
export default connect(null, { action })(Component)
31+
```
32+
33+
```js
34+
const mapDispatchToProps = { action }
35+
export default connect(null, mapDispatchToProps)(Component)
3236
```
3337

3438
```js
3539
const mapDispatchToProps = (dispatch) => ({
3640
action: () => dispatch(actionHelper(true))
3741
})
42+
export default connect(null, mapDispatchToProps)(Component)
3843
```
3944

4045
```js
4146
const mapDispatchToProps = (dispatch) => ({
4247
action: () => dispatch(action()),
4348
action1: (arg1, arg2) => dispatch(action(arg1 + arg2))
4449
})
50+
export default connect(null, mapDispatchToProps)(Component)
4551
```

0 commit comments

Comments
 (0)