@@ -21,7 +21,7 @@ ReactDOM.render(
21
21
< MyRootComponent / >
22
22
< / Provider> ,
23
23
rootEl
24
- );
24
+ )
25
25
```
26
26
27
27
##### React Router 0.13
@@ -34,8 +34,8 @@ Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "
34
34
< Handler routerState= {routerState} / >
35
35
< / Provider> ,
36
36
document .getElementById (' root' )
37
- );
38
- });
37
+ )
38
+ })
39
39
```
40
40
41
41
##### React Router 1.0
@@ -46,7 +46,7 @@ ReactDOM.render(
46
46
< Router history= {history}> ... < / Router>
47
47
< / Provider> ,
48
48
targetEl
49
- );
49
+ )
50
50
```
51
51
52
52
### ` connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) `
@@ -99,7 +99,7 @@ Returns the wrapped component instance. Only available if you pass `{ withRef: t
99
99
##### Inject just ` dispatch ` and don't listen to store
100
100
101
101
``` js
102
- export default connect ()(TodoApp);
102
+ export default connect ()(TodoApp)
103
103
```
104
104
105
105
##### Inject ` dispatch ` and every field in the global state
@@ -109,151 +109,151 @@ export default connect()(TodoApp);
109
109
> listen to a relevant slice of the state.
110
110
111
111
``` js
112
- export default connect (state => state)(TodoApp);
112
+ export default connect (state => state)(TodoApp)
113
113
```
114
114
115
115
##### Inject ` dispatch ` and ` todos `
116
116
117
117
``` js
118
118
function mapStateToProps (state ) {
119
- return { todos: state .todos };
119
+ return { todos: state .todos }
120
120
}
121
121
122
- export default connect (mapStateToProps)(TodoApp);
122
+ export default connect (mapStateToProps)(TodoApp)
123
123
```
124
124
125
125
##### Inject ` todos ` and all action creators (` addTodo ` , ` completeTodo ` , ...)
126
126
127
127
``` js
128
- import * as actionCreators from ' ./actionCreators' ;
128
+ import * as actionCreators from ' ./actionCreators'
129
129
130
130
function mapStateToProps (state ) {
131
- return { todos: state .todos };
131
+ return { todos: state .todos }
132
132
}
133
133
134
- export default connect (mapStateToProps, actionCreators)(TodoApp);
134
+ export default connect (mapStateToProps, actionCreators)(TodoApp)
135
135
```
136
136
137
137
##### Inject ` todos ` and all action creators (` addTodo ` , ` completeTodo ` , ...) as ` actions `
138
138
139
139
``` js
140
- import * as actionCreators from ' ./actionCreators' ;
141
- import { bindActionCreators } from ' redux' ;
140
+ import * as actionCreators from ' ./actionCreators'
141
+ import { bindActionCreators } from ' redux'
142
142
143
143
function mapStateToProps (state ) {
144
- return { todos: state .todos };
144
+ return { todos: state .todos }
145
145
}
146
146
147
147
function mapDispatchToProps (dispatch ) {
148
- return { actions: bindActionCreators (actionCreators, dispatch) };
148
+ return { actions: bindActionCreators (actionCreators, dispatch) }
149
149
}
150
150
151
- export default connect (mapStateToProps, mapDispatchToProps)(TodoApp);
151
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
152
152
```
153
153
154
154
##### Inject ` todos ` and a specific action creator (` addTodo ` )
155
155
156
156
``` js
157
- import { addTodo } from ' ./actionCreators' ;
158
- import { bindActionCreators } from ' redux' ;
157
+ import { addTodo } from ' ./actionCreators'
158
+ import { bindActionCreators } from ' redux'
159
159
160
160
function mapStateToProps (state ) {
161
- return { todos: state .todos };
161
+ return { todos: state .todos }
162
162
}
163
163
164
164
function mapDispatchToProps (dispatch ) {
165
- return bindActionCreators ({ addTodo }, dispatch);
165
+ return bindActionCreators ({ addTodo }, dispatch)
166
166
}
167
167
168
- export default connect (mapStateToProps, mapDispatchToProps)(TodoApp);
168
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
169
169
```
170
170
171
171
##### Inject ` todos ` , todoActionCreators as ` todoActions ` , and counterActionCreators as ` counterActions `
172
172
173
173
``` js
174
- import * as todoActionCreators from ' ./todoActionCreators' ;
175
- import * as counterActionCreators from ' ./counterActionCreators' ;
176
- import { bindActionCreators } from ' redux' ;
174
+ import * as todoActionCreators from ' ./todoActionCreators'
175
+ import * as counterActionCreators from ' ./counterActionCreators'
176
+ import { bindActionCreators } from ' redux'
177
177
178
178
function mapStateToProps (state ) {
179
- return { todos: state .todos };
179
+ return { todos: state .todos }
180
180
}
181
181
182
182
function mapDispatchToProps (dispatch ) {
183
183
return {
184
184
todoActions: bindActionCreators (todoActionCreators, dispatch),
185
185
counterActions: bindActionCreators (counterActionCreators, dispatch)
186
- };
186
+ }
187
187
}
188
188
189
- export default connect (mapStateToProps, mapDispatchToProps)(TodoApp);
189
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
190
190
```
191
191
192
192
##### Inject ` todos ` , and todoActionCreators and counterActionCreators together as ` actions `
193
193
194
194
``` js
195
- import * as todoActionCreators from ' ./todoActionCreators' ;
196
- import * as counterActionCreators from ' ./counterActionCreators' ;
197
- import { bindActionCreators } from ' redux' ;
195
+ import * as todoActionCreators from ' ./todoActionCreators'
196
+ import * as counterActionCreators from ' ./counterActionCreators'
197
+ import { bindActionCreators } from ' redux'
198
198
199
199
function mapStateToProps (state ) {
200
- return { todos: state .todos };
200
+ return { todos: state .todos }
201
201
}
202
202
203
203
function mapDispatchToProps (dispatch ) {
204
204
return {
205
205
actions: bindActionCreators (Object .assign ({}, todoActionCreators, counterActionCreators), dispatch)
206
- };
206
+ }
207
207
}
208
208
209
- export default connect (mapStateToProps, mapDispatchToProps)(TodoApp);
209
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
210
210
```
211
211
212
212
##### Inject ` todos ` , and all todoActionCreators and counterActionCreators directly as props
213
213
214
214
``` js
215
- import * as todoActionCreators from ' ./todoActionCreators' ;
216
- import * as counterActionCreators from ' ./counterActionCreators' ;
217
- import { bindActionCreators } from ' redux' ;
215
+ import * as todoActionCreators from ' ./todoActionCreators'
216
+ import * as counterActionCreators from ' ./counterActionCreators'
217
+ import { bindActionCreators } from ' redux'
218
218
219
219
function mapStateToProps (state ) {
220
- return { todos: state .todos };
220
+ return { todos: state .todos }
221
221
}
222
222
223
223
function mapDispatchToProps (dispatch ) {
224
- return bindActionCreators (Object .assign ({}, todoActionCreators, counterActionCreators), dispatch);
224
+ return bindActionCreators (Object .assign ({}, todoActionCreators, counterActionCreators), dispatch)
225
225
}
226
226
227
- export default connect (mapStateToProps, mapDispatchToProps)(TodoApp);
227
+ export default connect (mapStateToProps, mapDispatchToProps)(TodoApp)
228
228
```
229
229
230
230
##### Inject ` todos ` of a specific user depending on props
231
231
232
232
``` js
233
- import * as actionCreators from ' ./actionCreators' ;
233
+ import * as actionCreators from ' ./actionCreators'
234
234
235
235
function mapStateToProps (state , ownProps ) {
236
- return { todos: state .todos [ownProps .userId ] };
236
+ return { todos: state .todos [ownProps .userId ] }
237
237
}
238
238
239
- export default connect (mapStateToProps)(TodoApp);
239
+ export default connect (mapStateToProps)(TodoApp)
240
240
```
241
241
242
242
##### Inject ` todos ` of a specific user depending on props, and inject ` props.userId ` into the action
243
243
244
244
``` js
245
- import * as actionCreators from ' ./actionCreators' ;
245
+ import * as actionCreators from ' ./actionCreators'
246
246
247
247
function mapStateToProps (state ) {
248
- return { todos: state .todos };
248
+ return { todos: state .todos }
249
249
}
250
250
251
251
function mergeProps (stateProps , dispatchProps , ownProps ) {
252
252
return Object .assign ({}, ownProps, {
253
253
todos: stateProps .todos [ownProps .userId ],
254
254
addTodo : (text ) => dispatchProps .addTodo (ownProps .userId , text)
255
- });
255
+ })
256
256
}
257
257
258
- export default connect (mapStateToProps, actionCreators, mergeProps)(TodoApp);
258
+ export default connect (mapStateToProps, actionCreators, mergeProps)(TodoApp)
259
259
```
0 commit comments