ng-redux icon indicating copy to clipboard operation
ng-redux copied to clipboard

[Docs] Improve section Using DevTools

Open davincho opened this issue 8 years ago • 3 comments

I would suggest to list the exact versions of the required dependencies (react, react-redux and redux-devtools), as with React 14 it was deprecated and with React 15.X there is no React.render anymore, but it was moved to ReactDom.render from react-dom. Furthermore following the example I had to use version 2.1.5 of redux-devtools as some named exports did not exist in the latest version.

Probably mentioning the Chrome DevTools Extension would be helpful as well:

If you think React is an overkill just for including DevTools, you may would be interested in the Chrome Redux DevTools Extension. Follow these steps to integrate it into you app.

Naive example:

$ngReduxProvider.createStoreWith(rootReducer, [], [window.devToolsExtension()]);

With webpack and define plugin:

const enhancer = [];

if(process.env.NODE_ENV === 'development' && window.devToolsExtension) {
  enhancer.push(window.devToolsExtension());
}

$ngReduxProvider.createStoreWith(rootReducer, [], enhancer);

I am happy to create a PR.

davincho avatar Aug 17 '16 07:08 davincho

@davincho Hi, I tried your "naive" example and the Chrome redux extension just says "no store found. Any ideas?

johnsoftek avatar Nov 23 '16 03:11 johnsoftek

@davincho Hmm. It's working now. Thanks for the tip.

johnsoftek avatar Nov 23 '16 03:11 johnsoftek

I created a PR here that shows an example using the Redux DevTools Extension. I can post how we are using webpack and angular to inject an env constant to determine whether or not the devtools and other middleware should be turned on if you would like.

ClayChristmas avatar Dec 19 '16 18:12 ClayChristmas