Usage with global providers and preact-router
- Dominant language
- TypeScript
- Stars
- 929
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
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](https://github.com/konsumer/demo-preact-router-proppy) that illustrates what I am trying to accomplish. I want global provider for modal & user state. [Here](https://codesandbox.io/s/github/konsumer/demo-preact-router-proppy) 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:
```js
// when global state changes, render app
if (typeof window !== 'undefined') {
providers.subscribe(props => {
console.log('PROVIDERS', props)
render(, 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.
Contributor guide
Assessment
This issue has not been assessed yet.