Skip to content

Commit 152fa79

Browse files
ClayChristmaswbuchwalter
authored andcommitted
Updated the documentation so that it doesn't throw the exception any time the state is changed anymore and added documentation for using Redux DevTools Extension instead of including react. (#118)
1 parent 03bc0b6 commit 152fa79

File tree

1 file changed

+24
-4
lines changed

1 file changed

+24
-4
lines changed

README.md

+24-4
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,11 @@ See [redux-ui-router](https://github.com/neilff/redux-ui-router) to make ng-redu
191191
See [ng-redux-router](https://github.com/amitport/ng-redux-router) to make ng-redux and angular-route work together.
192192

193193
## Using DevTools
194-
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.
194+
There are two options for using Redux DevTools with your angular app. The first option is to use the [redux-devtools package] (https://www.npmjs.com/package/redux-devtools),
195+
and the other option is to use the [Redux DevTools Extension] (https://github.com/zalmoxisus/redux-devtools-extension#usage). The Redux DevTools Extension does not
196+
require adding the react, react-redux, or redux-devtools packages to your project.
197+
198+
To use the redux-devtools package, 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.
195199

196200
```JS
197201
[...]
@@ -203,16 +207,16 @@ angular.module('app', ['ngRedux'])
203207
.config(($ngReduxProvider) => {
204208
$ngReduxProvider.createStoreWith(rootReducer, [thunk], [devTools()]);
205209
})
206-
.run(($ngRedux, $rootScope) => {
210+
.run(($ngRedux, $rootScope, $timeout) => {
207211
React.render(
208212
<App store={ $ngRedux }/>,
209213
document.getElementById('devTools')
210214
);
211215

212216
//To reflect state changes when disabling/enabling actions via the monitor
213217
//there is probably a smarter way to achieve that
214-
$ngRedux.subscribe(_ => {
215-
setTimeout($rootScope.$apply, 100);
218+
$ngRedux.subscribe(() => {
219+
$timeout(() => {$rootScope.$apply(() => {})}, 100);
216220
});
217221
});
218222

@@ -238,5 +242,21 @@ angular.module('app', ['ngRedux'])
238242
</body>
239243
```
240244

245+
To use the Redux DevTools extension, you must first make sure that you have installed the [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension#installation).
246+
247+
```JS
248+
angular.module('app', ['ngRedux'])
249+
.config(($ngReduxProvider) => {
250+
$ngReduxProvider.createStoreWith(rootReducer, [thunk], [window.__REDUX_DEVTOOLS_EXTENSION__()]);
251+
})
252+
.run(($ngRedux, $rootScope, $timeout) => {
253+
//To reflect state changes when disabling/enabling actions via the monitor
254+
//there is probably a smarter way to achieve that
255+
$ngRedux.subscribe(() => {
256+
$timeout(() => {$rootScope.$apply(() => {})}, 100);
257+
});
258+
});
259+
```
260+
241261
## Additional Resources
242262
* [Managing state with Redux and Angular](http://blog.rangle.io/managing-state-redux-angular/)

0 commit comments

Comments
 (0)