Skip to content

Commit 5fdeade

Browse files
committed
Update README.md
1 parent 95bb962 commit 5fdeade

File tree

1 file changed

+10
-8
lines changed

1 file changed

+10
-8
lines changed

README.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,27 +90,29 @@ Why don’t we bind action creators to a store right away? This is because of th
9090
import { Component } from 'react';
9191
import { connect } from 'react-redux';
9292

93-
// Assuming this is our “dumb” counter
93+
// Action creators:
94+
import { increment } from '../actionsCreators';
95+
// “Dumb” component:
9496
import Counter from '../components/Counter';
9597

96-
// Assuming action creators as named exports:
97-
import * as counterActionCreators from '../actionsCreators';
98-
9998
// Which part of the Redux global state does our component want to receive as props?
10099
function mapState(state) {
101100
return {
102101
counter: state.counter
103102
};
104103
}
105104

106-
// Don't forget to actually use connect!
107-
export default connect(mapState, counterActionCreators)(CounterContainer);
105+
// First argument tells which state fields it’s interested in.
106+
// Second argument tells which action creators to bind and inject.
107+
// You may also pass a `dispatch` => Object function as a second argument.
108+
109+
export default connect(mapState, { increment })(CounterContainer);
108110
```
109111

110112
Whether to put `connect()` call in the same file as the “dumb” component, or separately, is up to you.
111113
Ask yourself whether you'd want to reuse this component but bind it to different data, or not.
112114

113-
### Usage Notes
115+
### Nesting
114116

115117
You can have many `connect()`-ed components in your app at any depth, and you can even nest them. It is however preferable that you try to only `connect()` top-level components such as route handlers, so the data flow in your application stays predictable.
116118

@@ -131,7 +133,7 @@ Don’t forget decorators are experimental! And they desugar to function calls a
131133

132134
This the most basic usage, but `connect()` supports many other different patterns: just passing the vanilla `dispatch()` function down, binding multiple action creators, putting them as `actions` prop, selecting parts of state and binding action creators depending on `props`, and so on. Check out `connect()` docs below to learn more.
133135

134-
### Injecting Redux store
136+
### Injecting Redux Store
135137

136138
Finally, how do we actually hook it up to a Redux store? We need to create the store somewhere at the root of our component hierarchy. For client apps, the root component is a good place. For server rendering, you can do this in the request handler.
137139

0 commit comments

Comments
 (0)