Skip to content

Commit e586d68

Browse files
committed
Update README.md
1 parent 02d3175 commit e586d68

File tree

1 file changed

+21
-8
lines changed

1 file changed

+21
-8
lines changed

README.md

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,15 @@ import * as CounterActions from '../actions/counter';
4747

4848
class CounterController {
4949
constructor($ngRedux, $scope) {
50-
/* ngRedux will merge the requested state's slice and actions onto the $scope,
50+
/* ngRedux will merge the requested state's slice and actions onto this,
5151
you don't need to redefine them in your controller */
5252

53-
$ngRedux.connect($scope, this.mapStateToScope, CounterActions);
53+
let unsubscribe = $ngRedux.connect(this.mapStateToTarget, CounterActions)(this);
54+
$scope.$on('$destroy', unsubscribe);
5455
}
5556

5657
// Which part of the Redux global state does our component want to receive on $scope?
57-
mapStateToScope(state) {
58+
mapStateToTarget(state) {
5859
return {
5960
counter: state.counter
6061
};
@@ -84,17 +85,29 @@ Creates the Redux store, and allow `connect()` to access it.
8485
* [`storeEnhancers`] \(*Function[]*): Optional, this will be used to create the store, in most cases you don't need to pass anything, see [Store Enhancer official documentation.](http://rackt.github.io/redux/docs/Glossary.html#store-enhancer)
8586

8687

87-
### `connect([scope], [mapStateToScope], [mapDispatchToScope])`
88+
### `connect([scope], [mapStateToTarget], [mapDispatchToTarget])([target])`
8889

8990
Connects an Angular component to Redux.
9091

9192
#### Arguments
92-
* [`scope`] \(*Object*): The `$scope` of your controller.
93-
* [`mapStateToScope`] \(*Function*): connect will subscribe to Redux store updates. Any time it updates, mapStateToTarget will be called. Its result must be a plain object, and it will be merged into `target`.
94-
* [`mapDispatchToScope`] \(*Object* or *Function*): If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but bound to a Redux store, will be merged into your component `$scope`. If a function is passed, it will be given `dispatch`. It’s up to you to return an object that somehow uses `dispatch` to bind action creators in your own way. (Tip: you may use the [`bindActionCreators()`](http://gaearon.github.io/redux/docs/api/bindActionCreators.html) helper from Redux.).
93+
* [`mapStateToTarget`] \(*Function*): connect will subscribe to Redux store updates. Any time it updates, mapStateToTarget will be called. Its result must be a plain object, and it will be merged into `target`.
94+
* [`mapDispatchToTarget`] \(*Object* or *Function*): Optional. If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but bound to a Redux store, will be merged onto `target`. If a function is passed, it will be given `dispatch`. It’s up to you to return an object that somehow uses `dispatch` to bind action creators in your own way. (Tip: you may use the [`bindActionCreators()`](http://gaearon.github.io/redux/docs/api/bindActionCreators.html) helper from Redux.).
95+
96+
*You then need to invoke the function a second time, with `target` as parameter:*
97+
* [`target`] \(*Object* or *Function*): If passed an object, the results of `mapStateToTarget` and `mapDispatchToTarget` will be merged onto it. If passed a function, the function will receive the results of `mapStateToTarget` and `mapDispatchToTarget` as parameter.
98+
99+
e.g:
100+
```JS
101+
connect(this.mapState, this.mapDispatch)(this);
102+
//Or
103+
connect(this.mapState, this.mapDispatch)((selectedState, actions) => {/* ... */});
104+
```
105+
95106

96107
#### Remarks
97-
* As `$scope` is passed to `connect`, ngRedux will listen to the `$destroy` event and unsubscribe the change listener itself, you don't need to keep track of your subscribtions.
108+
* The `mapStateToTarget` function takes a single argument of the entire Redux store’s state and returns an object to be passed as props. It is often called a selector. Use reselect to efficiently compose selectors and compute derived data.
109+
110+
98111

99112
### Store API
100113
All of redux's store methods (i.e. `dispatch`, `subscribe` and `getState`) are exposed by $ngRedux and can be accessed directly. For example:

0 commit comments

Comments
 (0)