Usage with global providers and preact-router
konsumer opened this issue · comments
Hi, I am really excited about replacing react+recompose+react-router with much lighter alternatives, but I am having some issues fitting it all together. I am coming from react/recompose, so I'm sure I am doing something just a bit wrong, but I can't seem to figure it out. Any ideas would be much appreciated.
I have a demo that illustrates what I am trying to accomplish. I want global provider for modal & user state. Here is a code sandbox.
Basically, I can't seem to work out subscribing to a global state and updating the app.
To reproduce, click "login" and login with any email/password. This should trigger 3 provider state changes:
- show modal with login form
- update user
- hide modal with login form
which in turn should change these component-state things:
- change menu items in
Header
- show/hide modal in
Header
- change routes for
/
fromPageHome
toPageDashboard
(for logged in users)
I did this, which seems like a terrible hack:
// when global state changes, render app
if (typeof window !== 'undefined') {
providers.subscribe(props => {
console.log('PROVIDERS', props)
render(<App />, document.body)
})
}
It works a little better at refreshing when it should show the modal, but only about half the time (show modal works, but not hide.)
Initial user-state seem to work ok (derive user from JWT works fine) so you can login, then refresh page and it looks how it should. You can click LOGOUT, and refresh, and it kills the token and user-state, and goes back to anonymous view.
I also added a Footer
to show current in-component state indicators, and they work same as other things (on refresh, it shows user: true
if logged in, but doesn't update otherwise.)
I made this sandbox as another way to have providers update the app, that I can think of. It also doesn't update, so I'm not sure what I am doing wrong.