Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debug not as verbose when enabling via method #24

Closed
aulneau opened this issue May 17, 2018 · 11 comments

Comments

Projects
None yet
2 participants
@aulneau
Copy link
Contributor

commented May 17, 2018

I'm working with redux-bundler and next.js (ssr react), and when trying to enable debug mode by doing something along the lines of

componentDidMount(){
    localStorage.debug = true
}

Redux bundler doesn't catch it and it never turns on. However when I enable it via the exposed function, it does turn it on but I no longer can see the selectors or reactors.

This is what I see:
screen shot 2018-05-17 at 11 21 29 am

vs the sample project (and other non-ssr apps I've used redux-bundler with)
screen shot 2018-05-17 at 11 21 49 am

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented May 20, 2018

Ah, interesting. Should be a fairly simple fix. I think I know what is happening. Thanks for reporting this.

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented May 22, 2018

@aulneau this is a bit trickier than I originally thought. The thing is, the determination of whether or not it is in debug mode really only happens once this is because init is only fired on startup: https://github.com/HenrikJoreteg/redux-bundler/blob/master/src/bundles/debug.js#L24

The determination originally happens here: https://github.com/HenrikJoreteg/redux-bundler/blob/master/src/utils.js#L1-L5

Would you mind explaining a bit more what you're trying to do? My idea behind how this feature would work is you'd set localStorage.debug = true using the devtools in your browser, not from within your application code, then you'd refresh. That way it's always there if you want it, and you can ship it to production, but only turn it on when you need it.

Regardless, it may make sense to change it so that the code that currently runs in that init block instead would run when you call doEnableDebug().

Anyway, I'd love to better understand what you're trying to do, thanks!

@aulneau

This comment has been minimized.

Copy link
Contributor Author

commented May 22, 2018

ah okay so yeah, I think this works great in not ssr environments, but it seems to break with anything server side. When I enable the flag, it never registers. Whereas if I enable it via:

  componentDidMount() {
    if (!this.props.store.selectIsDebug()) {
      this.props.store.doEnableDebug();
    }
  }

It enables it, but in the limited version I've mentioned before.

One solution would be to check for a cookie with the debug bool set to true, or another non-window object that could be read in contexts outside of the client.

Regardless, it may make sense to change it so that the code that currently runs in that init block instead would run when you call doEnableDebug().

I think that makes sense, too!

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented May 22, 2018

@aulneau

This comment has been minimized.

Copy link
Contributor Author

commented May 22, 2018

@HenrikJoreteg No I'm fine with it only in the client personally -- it seems like the issue might be that the init function does not fire on the server, and then the client never picks it up

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented May 22, 2018

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented May 22, 2018

@aulneau

This comment has been minimized.

Copy link
Contributor Author

commented May 23, 2018

Ah yes exactly. I'm fetching data on the server and passing it through to the client. I'm not sure immediately how I would blacklist the debug data from being initialized on the server with everything else. Do you have any suggestions?

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented May 23, 2018

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented Nov 8, 2018

Quick update on this, so... i did SSR for a project recently, and when transferring state from server to client, you really don't want to include everything from every reducer. Because, for things like debug, and several other scenarios I found... you really want that to be determined in each environment where it runs. This way the server can have debug off and the client can have it on.

The usual approach for this state transfer is to send along all of store.getState()

What I ended up doing, that worked quite well, was creating a tiny bundle with a selector called selectSSRState that does this:

export default {
  name: 'ssrState',
  selectSSRState: state => ({
    reducer1ThatIwantToInclude: state.reducer1ThatIwantToInclude,
    otherReducer: state.otherReducer
  })
}

Then in your SSR function when getting state on the server, to transfer to the client, instead of store.getState() just use store.selectSSRState().

Just thought i'd post this here in case anyone came along and was wondering about this.

@HenrikJoreteg

This comment has been minimized.

Copy link
Owner

commented Jun 7, 2019

just published v25.0.0, it includes a fix for this, thanks! https://github.com/HenrikJoreteg/redux-bundler/blob/master/docs/misc/changelog.md#change-log

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.