Skip to content

Commit 33fbf06

Browse files
committed
Merge pull request reduxjs#492 from mindjuice/patch-10
Minor help text improvements
2 parents 60b378c + b61fcf4 commit 33fbf06

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

docs/basics/UsageWithReact.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ npm install --save react-redux
1616

1717
## Smart and Dumb Components
1818

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).
2020

2121
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.
2222

@@ -50,13 +50,13 @@ It is advisable that only top-level components of your app (such as route handle
5050
</table>
5151
</center>
5252

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.
5454

5555
## Desigining Component Hierarchy
5656

5757
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.
5858

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.
6060

6161
I see the following components (and their props) emerge from this brief:
6262

@@ -81,7 +81,7 @@ Let’s write them! We don’t need to think about binding to Redux yet. You can
8181

8282
## Dumb Components
8383

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:
8585

8686
#### `components/AddTodo.js`
8787

@@ -216,7 +216,7 @@ Footer.propTypes = {
216216
};
217217
```
218218

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:
220220

221221
#### `containers/App.js`
222222

@@ -264,9 +264,9 @@ By itself, it’s not very interesting. Let’s connect it to Redux!
264264

265265
## Connecting to Redux
266266

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.
268268

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.
270270

271271
#### `index.js`
272272

@@ -290,9 +290,9 @@ React.render(
290290
);
291291
```
292292

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.)
294294

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.
296296

297297
**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.
298298

@@ -369,8 +369,8 @@ function select(state) {
369369
export default connect(select)(App);
370370
```
371371

372-
This is it! The tiny todo app now functions correctly.
372+
That's it! The tiny todo app now functions correctly.
373373

374374
## Next Steps
375375

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

Comments
 (0)