@@ -48,7 +48,7 @@ A `mapStateToProps` function takes a maximum of two parameters. The number of de
4848If 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.
4949
5050` ` ` js
51- const mapStateToProps = state => ({ todos: state .todos })
51+ const mapStateToProps = ( state ) => ({ todos: state .todos })
5252` ` `
5353
5454##### ` ownProps `
@@ -59,7 +59,7 @@ The second parameter is normally referred to as `ownProps` by convention.
5959
6060` ` ` js
6161const mapStateToProps = (state , ownProps ) => ({
62- todo: state .todos [ownProps .id ]
62+ todo: state .todos [ownProps .id ],
6363})
6464` ` `
6565
@@ -83,12 +83,7 @@ Your component will receive `dispatch` by default, i.e., when you do not supply
8383// do not pass `mapDispatchToProps`
8484connect ()(MyComponent)
8585connect (mapState)(MyComponent)
86- connect (
87- mapState,
88- null ,
89- mergeProps,
90- options
91- )(MyComponent)
86+ connect (mapState, null , mergeProps, options)(MyComponent)
9287` ` `
9388
9489If 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
10398If your ` mapDispatchToProps ` is declared as a function taking one parameter, it will be given the ` dispatch ` of your ` store ` .
10499
105100` ` ` js
106- const mapDispatchToProps = dispatch => {
101+ const mapDispatchToProps = ( dispatch ) => {
107102 return {
108103 // dispatching plain actions
109104 increment : () => dispatch ({ type: ' INCREMENT' }),
110105 decrement : () => dispatch ({ type: ' DECREMENT' }),
111- reset : () => dispatch ({ type: ' RESET' })
106+ reset : () => dispatch ({ type: ' RESET' }),
112107 }
113108}
114109` ` `
@@ -121,11 +116,11 @@ The second parameter is normally referred to as `ownProps` by convention.
121116
122117` ` ` js
123118// binds on component re-rendering
124- < button onClick = {() => this .props .toggleTodo (this .props .todoId )} / >
119+ ; < button onClick = {() => this .props .toggleTodo (this .props .todoId )} / >
125120
126121// binds on `props` change
127122const mapDispatchToProps = (dispatch , ownProps ) => ({
128- toggleTodo : () => dispatch (toggleTodo (ownProps .todoId ))
123+ toggleTodo : () => dispatch (toggleTodo (ownProps .todoId )),
129124})
130125` ` `
131126
@@ -146,7 +141,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
146141 dispatchActionCreatedByActionCreator : () => dispatch (createMyAction ()),
147142 ... boundActions,
148143 // you may return dispatch here
149- dispatch
144+ dispatch,
150145 }
151146}
152147` ` `
@@ -165,13 +160,10 @@ import { addTodo, deleteTodo, toggleTodo } from './actionCreators'
165160const mapDispatchToProps = {
166161 addTodo,
167162 deleteTodo,
168- toggleTodo
163+ toggleTodo,
169164}
170165
171- export default connect (
172- null ,
173- mapDispatchToProps
174- )(TodoApp)
166+ export default connect (null , mapDispatchToProps)(TodoApp)
175167` ` `
176168
177169In 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
226218
227219` ` ` js
228220// 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+ )
235224` ` `
236225
237226#### ` pure : boolean `
@@ -308,14 +297,11 @@ The return of `connect()` is a wrapper function that takes your component and re
308297` ` ` js
309298import { login , logout } from ' ./actionCreators'
310299
311- const mapState = state => state .user
300+ const mapState = ( state ) => state .user
312301const mapDispatch = { login, logout }
313302
314303// 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)
319305
320306// second call: returns the wrapper component with mergedProps
321307// 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
328314` ` ` js
329315import { login , logout } from ' ./actionCreators'
330316
331- const mapState = state => state .user
317+ const mapState = ( state ) => state .user
332318const mapDispatch = { login, logout }
333319
334320// call connect to generate the wrapper function, and immediately call
335321// the wrapper function to generate the final wrapper component.
336322
337- export default connect (
338- mapState,
339- mapDispatch
340- )(Login)
323+ export default connect (mapState, mapDispatch)(Login)
341324` ` `
342325
343326## Example Usage
@@ -355,10 +338,7 @@ export default connect()(TodoApp)
355338` ` ` js
356339import * as actionCreators from ' ./actionCreators'
357340
358- export default connect (
359- null ,
360- actionCreators
361- )(TodoApp)
341+ export default connect (null , actionCreators)(TodoApp)
362342` ` `
363343
364344- Inject ` dispatch ` and every field in the global state
@@ -368,7 +348,7 @@ export default connect(
368348
369349` ` ` js
370350// don't do this!
371- export default connect (state => state)(TodoApp)
351+ export default connect (( state ) => state)(TodoApp)
372352` ` `
373353
374354- Inject ` dispatch ` and ` todos `
@@ -390,10 +370,7 @@ function mapStateToProps(state) {
390370 return { todos: state .todos }
391371}
392372
393- export default connect (
394- mapStateToProps,
395- actionCreators
396- )(TodoApp)
373+ export default connect (mapStateToProps, actionCreators)(TodoApp)
397374` ` `
398375
399376- Inject ` todos ` and all action creators (` addTodo ` , ` completeTodo ` , ...) as ` actions `
@@ -410,10 +387,7 @@ function mapDispatchToProps(dispatch) {
410387 return { actions: bindActionCreators (actionCreators, dispatch) }
411388}
412389
413- export default connect (
414- mapStateToProps,
415- mapDispatchToProps
416- )(TodoApp)
390+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
417391` ` `
418392
419393- Inject ` todos ` and a specific action creator (` addTodo ` )
@@ -430,10 +404,7 @@ function mapDispatchToProps(dispatch) {
430404 return bindActionCreators ({ addTodo }, dispatch)
431405}
432406
433- export default connect (
434- mapStateToProps,
435- mapDispatchToProps
436- )(TodoApp)
407+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
437408` ` `
438409
439410- Inject ` todos ` and specific action creators (` addTodo ` and ` deleteTodo ` ) with shorthand syntax
@@ -447,13 +418,10 @@ function mapStateToProps(state) {
447418
448419const mapDispatchToProps = {
449420 addTodo,
450- deleteTodo
421+ deleteTodo,
451422}
452423
453- export default connect (
454- mapStateToProps,
455- mapDispatchToProps
456- )(TodoApp)
424+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
457425` ` `
458426
459427- Inject ` todos ` , ` todoActionCreators ` as ` todoActions ` , and ` counterActionCreators ` as ` counterActions `
@@ -470,14 +438,11 @@ function mapStateToProps(state) {
470438function mapDispatchToProps (dispatch ) {
471439 return {
472440 todoActions: bindActionCreators (todoActionCreators, dispatch),
473- counterActions: bindActionCreators (counterActionCreators, dispatch)
441+ counterActions: bindActionCreators (counterActionCreators, dispatch),
474442 }
475443}
476444
477- export default connect (
478- mapStateToProps,
479- mapDispatchToProps
480- )(TodoApp)
445+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
481446` ` `
482447
483448- Inject ` todos ` , and todoActionCreators and counterActionCreators together as ` actions `
@@ -496,14 +461,11 @@ function mapDispatchToProps(dispatch) {
496461 actions: bindActionCreators (
497462 { ... todoActionCreators, ... counterActionCreators },
498463 dispatch
499- )
464+ ),
500465 }
501466}
502467
503- export default connect (
504- mapStateToProps,
505- mapDispatchToProps
506- )(TodoApp)
468+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
507469` ` `
508470
509471- Inject ` todos ` , and all ` todoActionCreators ` and ` counterActionCreators ` directly as props
@@ -524,10 +486,7 @@ function mapDispatchToProps(dispatch) {
524486 )
525487}
526488
527- export default connect (
528- mapStateToProps,
529- mapDispatchToProps
530- )(TodoApp)
489+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
531490` ` `
532491
533492- Inject ` todos ` of a specific user depending on props
@@ -554,15 +513,11 @@ function mapStateToProps(state) {
554513function mergeProps (stateProps , dispatchProps , ownProps ) {
555514 return Object .assign ({}, ownProps, {
556515 todos: stateProps .todos [ownProps .userId ],
557- addTodo : text => dispatchProps .addTodo (ownProps .userId , text)
516+ addTodo : ( text ) => dispatchProps .addTodo (ownProps .userId , text),
558517 })
559518}
560519
561- export default connect (
562- mapStateToProps,
563- actionCreators,
564- mergeProps
565- )(TodoApp)
520+ export default connect (mapStateToProps, actionCreators, mergeProps)(TodoApp)
566521` ` `
567522
568523## Notes
@@ -612,11 +567,8 @@ The factory functions are commonly used with memoized selectors. This gives you
612567
613568` ` ` js
614569const 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 ) => {
620572 const selectItemForThisComponent = makeUniqueSelectorInstance ()
621573 return function realMapState (state , ownProps ) {
622574 const item = selectItemForThisComponent (state, ownProps .itemId )
0 commit comments