@@ -48,7 +48,7 @@ A `mapStateToProps` function takes a maximum of two parameters. The number of de
48
48
If your ` mapStateToProps ` function is declared as taking one parameter, it will be called whenever the store state changes, and given the store state as the only parameter.
49
49
50
50
` ` ` js
51
- const mapStateToProps = state => ({ todos: state .todos })
51
+ const mapStateToProps = ( state ) => ({ todos: state .todos })
52
52
` ` `
53
53
54
54
##### ` ownProps `
@@ -59,7 +59,7 @@ The second parameter is normally referred to as `ownProps` by convention.
59
59
60
60
` ` ` js
61
61
const mapStateToProps = (state , ownProps ) => ({
62
- todo: state .todos [ownProps .id ]
62
+ todo: state .todos [ownProps .id ],
63
63
})
64
64
` ` `
65
65
@@ -83,12 +83,7 @@ Your component will receive `dispatch` by default, i.e., when you do not supply
83
83
// do not pass `mapDispatchToProps`
84
84
connect ()(MyComponent)
85
85
connect (mapState)(MyComponent)
86
- connect (
87
- mapState,
88
- null ,
89
- mergeProps,
90
- options
91
- )(MyComponent)
86
+ connect (mapState, null , mergeProps, options)(MyComponent)
92
87
` ` `
93
88
94
89
If you define a ` mapDispatchToProps` as a function, it will be called with a maximum of two parameters.
@@ -103,12 +98,12 @@ If you define a `mapDispatchToProps` as a function, it will be called with a max
103
98
If your ` mapDispatchToProps ` is declared as a function taking one parameter, it will be given the ` dispatch ` of your ` store ` .
104
99
105
100
` ` ` js
106
- const mapDispatchToProps = dispatch => {
101
+ const mapDispatchToProps = ( dispatch ) => {
107
102
return {
108
103
// dispatching plain actions
109
104
increment : () => dispatch ({ type: ' INCREMENT' }),
110
105
decrement : () => dispatch ({ type: ' DECREMENT' }),
111
- reset : () => dispatch ({ type: ' RESET' })
106
+ reset : () => dispatch ({ type: ' RESET' }),
112
107
}
113
108
}
114
109
` ` `
@@ -121,11 +116,11 @@ The second parameter is normally referred to as `ownProps` by convention.
121
116
122
117
` ` ` js
123
118
// binds on component re-rendering
124
- < button onClick = {() => this .props .toggleTodo (this .props .todoId )} / >
119
+ ; < button onClick = {() => this .props .toggleTodo (this .props .todoId )} / >
125
120
126
121
// binds on `props` change
127
122
const mapDispatchToProps = (dispatch , ownProps ) => ({
128
- toggleTodo : () => dispatch (toggleTodo (ownProps .todoId ))
123
+ toggleTodo : () => dispatch (toggleTodo (ownProps .todoId )),
129
124
})
130
125
` ` `
131
126
@@ -146,7 +141,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
146
141
dispatchActionCreatedByActionCreator : () => dispatch (createMyAction ()),
147
142
... boundActions,
148
143
// you may return dispatch here
149
- dispatch
144
+ dispatch,
150
145
}
151
146
}
152
147
` ` `
@@ -165,13 +160,10 @@ import { addTodo, deleteTodo, toggleTodo } from './actionCreators'
165
160
const mapDispatchToProps = {
166
161
addTodo,
167
162
deleteTodo,
168
- toggleTodo
163
+ toggleTodo,
169
164
}
170
165
171
- export default connect (
172
- null ,
173
- mapDispatchToProps
174
- )(TodoApp)
166
+ export default connect (null , mapDispatchToProps)(TodoApp)
175
167
` ` `
176
168
177
169
In this case, React-Redux binds the ` dispatch ` of your store to each of the action creators using ` bindActionCreators ` . The result will be regarded as ` dispatchProps ` , which will be either directly merged to your connected components, or supplied to ` mergeProps ` as the second argument.
@@ -226,12 +218,9 @@ You may pass the context to your connected component either by passing it here a
226
218
227
219
` ` ` js
228
220
// const MyContext = React.createContext();
229
- connect (
230
- mapStateToProps,
231
- mapDispatchToProps,
232
- null ,
233
- { context: MyContext }
234
- )(MyComponent)
221
+ connect (mapStateToProps, mapDispatchToProps, null , { context: MyContext })(
222
+ MyComponent
223
+ )
235
224
` ` `
236
225
237
226
#### ` pure : boolean `
@@ -308,14 +297,11 @@ The return of `connect()` is a wrapper function that takes your component and re
308
297
` ` ` js
309
298
import { login , logout } from ' ./actionCreators'
310
299
311
- const mapState = state => state .user
300
+ const mapState = ( state ) => state .user
312
301
const mapDispatch = { login, logout }
313
302
314
303
// first call: returns a hoc that you can use to wrap any component
315
- const connectUser = connect (
316
- mapState,
317
- mapDispatch
318
- )
304
+ const connectUser = connect (mapState, mapDispatch)
319
305
320
306
// second call: returns the wrapper component with mergedProps
321
307
// you may use the hoc to enable different components to get the same behavior
@@ -328,16 +314,13 @@ In most cases, the wrapper function will be called right away, without being sav
328
314
` ` ` js
329
315
import { login , logout } from ' ./actionCreators'
330
316
331
- const mapState = state => state .user
317
+ const mapState = ( state ) => state .user
332
318
const mapDispatch = { login, logout }
333
319
334
320
// call connect to generate the wrapper function, and immediately call
335
321
// the wrapper function to generate the final wrapper component.
336
322
337
- export default connect (
338
- mapState,
339
- mapDispatch
340
- )(Login)
323
+ export default connect (mapState, mapDispatch)(Login)
341
324
` ` `
342
325
343
326
## Example Usage
@@ -355,10 +338,7 @@ export default connect()(TodoApp)
355
338
` ` ` js
356
339
import * as actionCreators from ' ./actionCreators'
357
340
358
- export default connect (
359
- null ,
360
- actionCreators
361
- )(TodoApp)
341
+ export default connect (null , actionCreators)(TodoApp)
362
342
` ` `
363
343
364
344
- Inject ` dispatch ` and every field in the global state
@@ -368,7 +348,7 @@ export default connect(
368
348
369
349
` ` ` js
370
350
// don't do this!
371
- export default connect (state => state)(TodoApp)
351
+ export default connect (( state ) => state)(TodoApp)
372
352
` ` `
373
353
374
354
- Inject ` dispatch ` and ` todos `
@@ -390,10 +370,7 @@ function mapStateToProps(state) {
390
370
return { todos: state .todos }
391
371
}
392
372
393
- export default connect (
394
- mapStateToProps,
395
- actionCreators
396
- )(TodoApp)
373
+ export default connect (mapStateToProps, actionCreators)(TodoApp)
397
374
` ` `
398
375
399
376
- Inject ` todos ` and all action creators (` addTodo ` , ` completeTodo ` , ...) as ` actions `
@@ -410,10 +387,7 @@ function mapDispatchToProps(dispatch) {
410
387
return { actions: bindActionCreators (actionCreators, dispatch) }
411
388
}
412
389
413
- export default connect (
414
- mapStateToProps,
415
- mapDispatchToProps
416
- )(TodoApp)
390
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
417
391
` ` `
418
392
419
393
- Inject ` todos ` and a specific action creator (` addTodo ` )
@@ -430,10 +404,7 @@ function mapDispatchToProps(dispatch) {
430
404
return bindActionCreators ({ addTodo }, dispatch)
431
405
}
432
406
433
- export default connect (
434
- mapStateToProps,
435
- mapDispatchToProps
436
- )(TodoApp)
407
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
437
408
` ` `
438
409
439
410
- Inject ` todos ` and specific action creators (` addTodo ` and ` deleteTodo ` ) with shorthand syntax
@@ -447,13 +418,10 @@ function mapStateToProps(state) {
447
418
448
419
const mapDispatchToProps = {
449
420
addTodo,
450
- deleteTodo
421
+ deleteTodo,
451
422
}
452
423
453
- export default connect (
454
- mapStateToProps,
455
- mapDispatchToProps
456
- )(TodoApp)
424
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
457
425
` ` `
458
426
459
427
- Inject ` todos ` , ` todoActionCreators ` as ` todoActions ` , and ` counterActionCreators ` as ` counterActions `
@@ -470,14 +438,11 @@ function mapStateToProps(state) {
470
438
function mapDispatchToProps (dispatch ) {
471
439
return {
472
440
todoActions: bindActionCreators (todoActionCreators, dispatch),
473
- counterActions: bindActionCreators (counterActionCreators, dispatch)
441
+ counterActions: bindActionCreators (counterActionCreators, dispatch),
474
442
}
475
443
}
476
444
477
- export default connect (
478
- mapStateToProps,
479
- mapDispatchToProps
480
- )(TodoApp)
445
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
481
446
` ` `
482
447
483
448
- Inject ` todos ` , and todoActionCreators and counterActionCreators together as ` actions `
@@ -496,14 +461,11 @@ function mapDispatchToProps(dispatch) {
496
461
actions: bindActionCreators (
497
462
{ ... todoActionCreators, ... counterActionCreators },
498
463
dispatch
499
- )
464
+ ),
500
465
}
501
466
}
502
467
503
- export default connect (
504
- mapStateToProps,
505
- mapDispatchToProps
506
- )(TodoApp)
468
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
507
469
` ` `
508
470
509
471
- Inject ` todos ` , and all ` todoActionCreators ` and ` counterActionCreators ` directly as props
@@ -524,10 +486,7 @@ function mapDispatchToProps(dispatch) {
524
486
)
525
487
}
526
488
527
- export default connect (
528
- mapStateToProps,
529
- mapDispatchToProps
530
- )(TodoApp)
489
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
531
490
` ` `
532
491
533
492
- Inject ` todos ` of a specific user depending on props
@@ -554,15 +513,11 @@ function mapStateToProps(state) {
554
513
function mergeProps (stateProps , dispatchProps , ownProps ) {
555
514
return Object .assign ({}, ownProps, {
556
515
todos: stateProps .todos [ownProps .userId ],
557
- addTodo : text => dispatchProps .addTodo (ownProps .userId , text)
516
+ addTodo : ( text ) => dispatchProps .addTodo (ownProps .userId , text),
558
517
})
559
518
}
560
519
561
- export default connect (
562
- mapStateToProps,
563
- actionCreators,
564
- mergeProps
565
- )(TodoApp)
520
+ export default connect (mapStateToProps, actionCreators, mergeProps)(TodoApp)
566
521
` ` `
567
522
568
523
## Notes
@@ -612,11 +567,8 @@ The factory functions are commonly used with memoized selectors. This gives you
612
567
613
568
` ` ` js
614
569
const makeUniqueSelectorInstance = () =>
615
- createSelector (
616
- [selectItems, selectItemId],
617
- (items , itemId ) => items[itemId]
618
- )
619
- const makeMapState = state => {
570
+ createSelector ([selectItems, selectItemId], (items , itemId ) => items[itemId])
571
+ const makeMapState = (state ) => {
620
572
const selectItemForThisComponent = makeUniqueSelectorInstance ()
621
573
return function realMapState (state , ownProps ) {
622
574
const item = selectItemForThisComponent (state, ownProps .itemId )
0 commit comments