oncreate not firing and actions not updating state with dynamic views

Hello,

I am trying to set up a sort of state-based routing with hyperapp, with the following general architecture to create dynamic views:

const switchView = (state, actions) => {
  if (!state.auth.token) {
    return <Login
      state={state.auth}
      actions={actions.auth}
      />
  }
  if (!state.game.game_id) {
    return <Lobby
      state={state.game}
      actions={actions.game}
      />
  }
}

const view = (state, actions) => (
  <div>
    {switchView(state, actions)}
  </div>
);

app(state, actions, view, document.querySelector('#container'));

Everything on the Login view works as expected, and it switches to the Lobby view as soon as an auth token is attached to state.auth as expected.

Once it reaches the Lobby, view, though, things start to fall apart. oncreate handlers never fire, and although console.logging state and actions shows that all the expected data and functions are present, executing the actions has no effect on the state. I have placed console.logs to determine that the actions are indeed running, they are just not updating state.

Is there something about my architecture that is causing this break? Or is there some other issue?

[okwolf]

@hartbeatnt what you are seeing is expected behavior due to Hyperapp using immutable state updates.

If you wish to log state updates to the console, we do have an official @hyperapp/logger package you might want to try 😊 🔌

[lukejacksonn]

Or if you want to log the state on every update you can do this in the view:

const view = (state, actions) => console.log(state) ||
  <div>
    {switchView(state, actions)}
  </div>