You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/basics/UsageWithReact.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ npm install --save react-redux
16
16
17
17
## Smart and Dumb Components
18
18
19
-
React bindings for Redux embrace the idea of [dividing “smart” and “dumb” components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
19
+
React bindings for Redux embrace the idea of [separating “smart” and “dumb” components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
20
20
21
21
It is advisable that only top-level components of your app (such as route handlers) are aware of Redux. Components below them should be “dumb” and receive all data via props.
22
22
@@ -50,13 +50,13 @@ It is advisable that only top-level components of your app (such as route handle
50
50
</table>
51
51
</center>
52
52
53
-
In this todo app, we will only have a single “smart” component at the top of our view hierarchy. In more complex apps, you might have several of them. While you may nest “smart” components, we suggest you to pass props down whenever possible.
53
+
In this todo app, we will only have a single “smart” component at the top of our view hierarchy. In more complex apps, you might have several of them. While you may nest “smart” components, we suggest that you pass props down whenever possible.
54
54
55
55
## Desigining Component Hierarchy
56
56
57
57
Remember how we [designed the shape of the root state object](Reducers.md)? It’s time we design the UI hierarchy to match it. This is not a Redux-specific task. [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html) is a great tutorial that explains the process.
58
58
59
-
Our design brief is simple. We want to show a list of todo items. On click, a todo item is crossed out as completed. We want to show a field where user may add a new todo. In the footer, we want to show a toggle to show all / only completed / only incompleted todos.
59
+
Our design brief is simple. We want to show a list of todo items. On click, a todo item is crossed out as completed. We want to show a field where the user may add a new todo. In the footer, we want to show a toggle to show all / only completed / only incompleted todos.
60
60
61
61
I see the following components (and their props) emerge from this brief:
62
62
@@ -81,7 +81,7 @@ Let’s write them! We don’t need to think about binding to Redux yet. You can
81
81
82
82
## Dumb Components
83
83
84
-
These are all normal React components, so we won’t stop to examine them in details. Here they go:
84
+
These are all normal React components, so we won’t stop to examine them in detail. Here they go:
85
85
86
86
#### `components/AddTodo.js`
87
87
@@ -216,7 +216,7 @@ Footer.propTypes = {
216
216
};
217
217
```
218
218
219
-
This is it! We can verify that they work correctly by writing a dummy `App` to render them:
219
+
That's it! We can verify that they work correctly by writing a dummy `App` to render them:
220
220
221
221
#### `containers/App.js`
222
222
@@ -264,9 +264,9 @@ By itself, it’s not very interesting. Let’s connect it to Redux!
264
264
265
265
## Connecting to Redux
266
266
267
-
We need to do two changes to connect our `App` component to Redux and make it dispatch actions and read state from the Redux store.
267
+
We need to make two changes to connect our `App` component to Redux and make it dispatch actions and read state from the Redux store.
268
268
269
-
First, we need to import `Provider` from [`react-redux`](http://github.com/gaearon/react-redux) we installed earlier, and **wrap the root component in `<Provider>`** before rendering.
269
+
First, we need to import `Provider` from [`react-redux`](http://github.com/gaearon/react-redux), which we installed earlier, and **wrap the root component in `<Provider>`** before rendering.
270
270
271
271
#### `index.js`
272
272
@@ -290,9 +290,9 @@ React.render(
290
290
);
291
291
```
292
292
293
-
This makes our store instance available to the components below. (Internally, this is done via React [undocumented “context” feature](http://www.youtube.com/watch?v=H7vlH-wntD4), but it’s not exposed directly in the API so don’t worry about it.)
293
+
This makes our store instance available to the components below. (Internally, this is done via React's[undocumented “context” feature](http://www.youtube.com/watch?v=H7vlH-wntD4), but it’s not exposed directly in the API so don’t worry about it.)
294
294
295
-
Then, we **wrap the components we want to connect to Redux with `connect()` function from [`react-redux`](http://github.com/gaearon/react-redux)**. Try to only do this for a top-level component, or route handlers. While technically you can `connect()` any component in your app to Redux store, avoid doing this too deeply because it will make the data flow harder to trace.
295
+
Then, we **wrap the components we want to connect to Redux with the `connect()` function from [`react-redux`](http://github.com/gaearon/react-redux)**. Try to only do this for a top-level component, or route handlers. While technically you can `connect()` any component in your app to Redux store, avoid doing this too deeply, because it will make the data flow harder to trace.
296
296
297
297
**Any component wrapped with `connect()` call will receive a [`dispatch`](../api/Store.md#dispatch) function as a prop, and any state it needs from the global state.** The only argument to `connect()` is a function we call a **selector**. This function takes the global Redux store’s state, and returns the props you need for the component. In the simplest case, you can just return the `state` given to you, but you may also wish to transform it first.
298
298
@@ -369,8 +369,8 @@ function select(state) {
369
369
exportdefaultconnect(select)(App);
370
370
```
371
371
372
-
This is it! The tiny todo app now functions correctly.
372
+
That's it! The tiny todo app now functions correctly.
373
373
374
374
## Next Steps
375
375
376
-
Read the [complete source code for this tutorial](ExampleTodoList.md) to better internalize the knowledge you have received. Then, head straight to the [advanced tutorial](../advanced/README.md) to learn how to handle network and routing!
376
+
Read the [complete source code for this tutorial](ExampleTodoList.md) to better internalize the knowledge you have gained. Then, head straight to the [advanced tutorial](../advanced/README.md) to learn how to handle network requests and routing!
0 commit comments