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/quick-start.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,16 @@
1
1
## Quick Start
2
2
3
-
React bindings for Redux embrace the idea of [dividing “smart” and “dumb” components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
3
+
React bindings for Redux embrace the idea of [dividing container and presentational components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
4
4
5
-
It is advisable that only top-level components of your app (such as route handlers, for example) are aware of Redux. Components below them should be “dumb” and receive all data via props.
5
+
It is advisable that only top-level components of your app (such as route handlers, for example) are aware of Redux. Components below them should be presentational and receive all data via props.
@@ -37,9 +37,9 @@ It is advisable that only top-level components of your app (such as route handle
37
37
</tbody>
38
38
</table>
39
39
40
-
### “Dumb” components are unaware of Redux
40
+
### Presentational components are unaware of Redux
41
41
42
-
Let’s say we have a `<Counter />`“dumb” component with a number `value` prop, and an `onIncrement` function prop that it will call when user presses an “Increment” button:
42
+
Let’s say we have a `<Counter />`presentational component with a number `value` prop, and an `onIncrement` function prop that it will call when user presses an “Increment” button:
43
43
44
44
```js
45
45
importReactfrom'react'
@@ -53,11 +53,11 @@ export default function Counter(props) {
53
53
}
54
54
```
55
55
56
-
### “Smart” components are `connect()`-ed to Redux
56
+
### Container components are `connect()`-ed to Redux
57
57
58
58
Here’s how we hook it up to the Redux Store.
59
59
60
-
We will use the `connect()` function provided by `react-redux` to turn a “dumb”`Counter` into a smart component. The `connect()` function lets you specify *which exact* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity.
60
+
We will use the `connect()` function provided by `react-redux` to turn a presentational`Counter` into a container component. The `connect()` function lets you specify *which exact* state from the Redux store your component wants to track. This lets you subscribe on any level of granularity.
61
61
62
62
##### `containers/CounterContainer.js`
63
63
@@ -96,7 +96,7 @@ export default connect(
96
96
// See more recipes in detailed connect() examples below.
97
97
```
98
98
99
-
Whether to put the `connect()` call in the same file as the “dumb” component, or separately, is up to you.
99
+
Whether to put the `connect()` call in the same file as the presentational component, or separately, is up to you.
100
100
Ask yourself whether you’d want to reuse this component but bind it to different data, or not.
0 commit comments