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
*ngRedux lets you easily connect your angular components with Redux.*
17
13
18
-
ngRedux lets you easily connect your angular components with Redux.
19
-
the API is straightforward:
20
14
21
-
```JS
22
-
$ngRedux.connect(selector, callback);
23
-
```
15
+
## Table of Contents
24
16
25
-
Where `selector` is a function that takes Redux's entire store state as argument and returns an object that contains the slices of store state that your component is interested in.
26
-
e.g:
27
-
```JS
28
-
state=> ({todos:state.todos})
29
-
```
30
-
Note: if you are not familiar with this syntax, go and check out the [MDN Guide on fat arrow functions (ES2015)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
31
-
32
-
If you haven't, check out [reselect](https://github.com/faassen/reselect), an awesome tool to create and combine selectors.
17
+
-[Installation](#installation)
18
+
-[Quick Start](#quick-start)
19
+
-[API](#api)
20
+
-[Using DevTools](#using-devtools)
33
21
22
+
## Installation
34
23
35
-
This returned object will be passed as argument to the callback provided whenever the state changes.
36
-
ngRedux checks for shallow equality of the state's selected slice whenever the Store is updated, and will call the callback only if there is a change.
37
-
**Important: It is assumed that you never mutate your states, if you do mutate them, ng-redux will not execute the callback properly.**
38
-
See [Redux's doc](http://gaearon.github.io/redux/docs/basics/Reducers.html) to understand why you should not mutate your states.
39
-
24
+
**The current npm version is outdated, and will be updated once 1.0.0 is finished**
* reducer (Function): A single reducer composed of all other reducers (create with redux.combineReducer)
50
-
*[middleware] (Array of Function or String): An array containing all the middleware that should be applied. Functions and strings are both valid members. String will be resolved via Angular, allowing you to use dependency injection in your middlewares.
51
-
* storeEnhancer: Optional function that will be used to create the store, in most cases you don't need that, see [Store Enhancer official doc](http://rackt.github.io/redux/docs/Glossary.html#store-enhancer)
You can also grab multiple slices of the state by passing an array of selectors:
83
+
Creates the Redux store, and allow `connect()` to access it.
94
84
95
-
```JS
96
-
constructor($ngRedux) {
97
-
this.todos= [];
98
-
this.users= [];
99
-
$ngRedux.connect(state=> ({
100
-
todos:state.todos,
101
-
users:state.users
102
-
}),
103
-
({todos, users}) => {
104
-
this.todos= todos
105
-
this.users= users;
106
-
});
107
-
}
108
-
```
85
+
#### Arguments:
86
+
*[`reducer`]\(*Function*): A single reducer composed of all other reducers (create with redux.combineReducer)
87
+
*[`middlewares`]\(*Function[]*): Optional, An array containing all the middleware that should be applied. Functions and strings are both valid members. String will be resolved via Angular, allowing you to use dependency injection in your middlewares.
88
+
*[`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)
*[`scope`]\(*Object*): The `$scope` of your controller.
97
+
*[`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`.
98
+
*[`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.).
99
+
*[`propertyKey`]\(*string*): If provided, `mapStateToScope` and `mapDispatchToScope` will merge onto `$scope[propertyKey]`. This is needed especially when using the `ControllerAs` syntax: in this case you should provide the same value than the value provided to controllerAs (e.g: `'vm'`). When not using `ControllerAs` syntax, you are free to omit this argument, everything will be merged directly onto `$scope`.
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.
121
103
122
-
destroy() {
123
-
this.unsubscribe();
124
-
}
104
+
### Store API
105
+
All of redux's store methods (i.e. `dispatch`, `subscribe` and `getState`) are exposed by $ngRedux and can be accessed directly. For example:
125
106
107
+
```JS
108
+
$ngRedux.subscribe(() => {
109
+
let state =$ngRedux.getState();
110
+
//...
111
+
})
126
112
```
127
113
114
+
This means that you are free to use Redux basic API in advanced cases where `connect`'s API would not fill your needs.
128
115
129
-
#### Accessing Redux's store methods
130
-
All of redux's store methods (i.e. `dispatch`, `subscribe` and `getState`) are exposed by $ngRedux and can be accessed directly. For example:
116
+
117
+
## Using DevTools
118
+
In order to use Redux DevTools with your angular app, you need to install [react](https://www.npmjs.com/package/react), [react-redux](https://www.npmjs.com/package/react-redux) and [redux-devtools](https://www.npmjs.com/package/redux-devtools) as development dependencies.
0 commit comments