Adding the Redux dev tools?

[barrystaes]

I was wondering if there are plans to add redux-devtools because it looks useful. Or should i be fine without? Not sure if its bloat or not..

I'm no expert on redux, just giving it a spin.

[coryhouse]

I'm considering it but haven't had a chance to try them myself yet. If someone submits a PR I'd likely merge it.

[barrystaes]

I'm nowhere yet, but since you're interested: I followed their tutorial and made a (extremely minimalistic) start at https://github.com/barrystaes/react-slingshot/tree/feature-devtools

My next step would be "Exclude DevTools from Production Builds" but i'm not sure how to do that in react-slingshot without seperating the webpack.config.js and configureStore.js files into prod/dev versions. I'd be happy to hear your take on this.

[cuzzo]

@barrystaes,

Off the top of my head, you could look at webpack.hotModuleReplacementPlugin(). Then in src/store/configureStore.js, if module.reduxDevtools (or however you specify it) is defined, you could import the Devtool container, and then compose the reducers with Devtools.instrument(). Otherwise, do nothing.

Similarly, in src/containers/App.js, you could check if module.reduxDevtools is set before adding it to the App.

Does that make sense?

[coryhouse]

@barrystaes The webpack.config.js in this project is actually a factory for a webpack config. You pass it an environment and it returns a config. So no separate file is necessary.

Anyway, thanks Barry. I want to spend some time getting comfortable with the Redux devtools. Looks like you've got a great start.

[barrystaes]

Ok thanks! With your suggestions i completed my feature-devtools branch. I kept the code minimal.

Choices i made; (all covered in their tutorial)

• A popup window instead of redux-devtools-dock-monitor. Less code, and stays out of the way of your UI.
• No persistState() added. Its usefull to reproduce bugs with ?debug_session=reproducing_weird_bug and is easily added.
• A prod/dev version for configureStore.js so that the debug module/component code is not included in production builds. Same goes for the window code in src\index.js. A must honestly, not a choice.. but i'm still not happy with the duplication there, a dev version that wraps the prod version would be better. But i dont know how i could do that here without having to complicate that code even more.
• Just use the default redux-devtools-log-monitor view. Some drop-in alternatives are redux-devtools-diff-monitor and redux-devtools-filterable-log-monitor.

Just clone and build, it works comfortably. :)

Things i could improve on? Do you want me to make a PR?

[barrystaes]

I like to make this easy on you, so i just rebased it on your latest commit.

And a screenshot for good measure:

[coryhouse]

Wow, this looks great! I'm eager to try it out! And yes, a PR would be great. 👍

[barrystaes]

For posterity: PR #27 was not merged but i'll leave https://github.com/barrystaes/react-slingshot/tree/feature-devtools available for now.