Skip to content

Commit 9ef40e9

Browse files
committed
Merge pull request reduxjs#676 from pedrottimark/components-table
Invert rows and columns in table of components
2 parents e52a0e0 + 5946c69 commit 9ef40e9

File tree

1 file changed

+15
-13
lines changed

1 file changed

+15
-13
lines changed

docs/basics/UsageWithReact.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,35 +20,37 @@ React bindings for Redux embrace the idea of [separating “smart” and “dumb
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

23-
<center>
2423
<table>
2524
<thead>
2625
<tr>
2726
<th></th>
28-
<th>Location</th>
29-
<th>Aware of Redux</th>
30-
<th>To read data</th>
31-
<th>To change data</th>
27+
<th scope="col" style="text-align:left">“Smart” Components</th>
28+
<th scope="col" style="text-align:left">“Dumb” Components</th>
3229
</tr>
3330
</thead>
3431
<tbody>
3532
<tr>
36-
<td>“Smart” Components</td>
33+
<th scope="row" style="text-align:right">Location</th>
3734
<td>Top level, route handlers</td>
38-
<td>Yes</th>
39-
<td>Subscribe to Redux state</td>
40-
<td>Dispatch Redux actions</td>
35+
<td>Middle and leaf components</td>
4136
</tr>
4237
<tr>
43-
<td>“Dumb” Components</td>
44-
<td>Middle and leaf components</td>
38+
<th scope="row" style="text-align:right">Aware of Redux</th>
39+
<td>Yes</th>
4540
<td>No</th>
41+
</tr>
42+
<tr>
43+
<th scope="row" style="text-align:right">To read data</th>
44+
<td>Subscribe to Redux state</td>
4645
<td>Read data from props</td>
46+
</tr>
47+
<tr>
48+
<th scope="row" style="text-align:right">To change data</th>
49+
<td>Dispatch Redux actions</td>
4750
<td>Invoke callbacks from props</td>
4851
</tr>
4952
</tbody>
5053
</table>
51-
</center>
5254

5355
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.
5456

@@ -271,7 +273,7 @@ First, we need to import `Provider` from [`react-redux`](http://github.com/gaear
271273
#### `index.js`
272274

273275
```js
274-
import React from 'react';
276+
import React from 'react';
275277
import { createStore } from 'redux';
276278
import { Provider } from 'react-redux';
277279
import App from './containers/App';

0 commit comments

Comments
 (0)