|
1 | 1 | # Enforces that mapDispatchToProps uses a shorthand method to wrap actions in dispatch calls whenever possible. (react-redux/mapDispatchToProps-prefer-shorthand)
|
2 | 2 |
|
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. |
4 | 4 |
|
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) |
6 | 6 |
|
7 | 7 | ## Rule details
|
8 | 8 |
|
9 |
| -The following pattern is considered incorrect: |
| 9 | +The following patterns are considered incorrect: |
10 | 10 |
|
11 | 11 | ```js
|
12 | 12 | const mapDispatchToProps = (dispatch) => ({
|
13 | 13 | action: () => dispatch(action())
|
14 | 14 | })
|
15 |
| - |
16 |
| -// it should use equivalent shorthand wrapping instead: |
17 |
| -// const mapDispatchToProps = {action} |
| 15 | +export default connect(null, mapDispatchToProps)(Component) |
18 | 16 | ```
|
19 | 17 |
|
20 | 18 | ```js
|
21 | 19 | const mapDispatchToProps = (dispatch) => ({
|
22 | 20 | action: () => dispatch(action()),
|
23 | 21 | action1: (arg1, arg2) => dispatch(action(arg1, arg2))
|
24 | 22 | })
|
| 23 | +export default connect(null, mapDispatchToProps)(Component) |
25 | 24 | ```
|
26 | 25 |
|
27 | 26 | The following patterns are considered correct:
|
28 | 27 |
|
29 | 28 |
|
30 | 29 | ```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) |
32 | 36 | ```
|
33 | 37 |
|
34 | 38 | ```js
|
35 | 39 | const mapDispatchToProps = (dispatch) => ({
|
36 | 40 | action: () => dispatch(actionHelper(true))
|
37 | 41 | })
|
| 42 | +export default connect(null, mapDispatchToProps)(Component) |
38 | 43 | ```
|
39 | 44 |
|
40 | 45 | ```js
|
41 | 46 | const mapDispatchToProps = (dispatch) => ({
|
42 | 47 | action: () => dispatch(action()),
|
43 | 48 | action1: (arg1, arg2) => dispatch(action(arg1 + arg2))
|
44 | 49 | })
|
| 50 | +export default connect(null, mapDispatchToProps)(Component) |
45 | 51 | ```
|
0 commit comments