Usage with global providers and preact-router

[konsumer]

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 / from PageHome to PageDashboard (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.

[konsumer]

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.)

[konsumer]

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.