Hyperapp: oncreate not firing and actions not updating state with dynamic views

[hartbeatnt]

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?

[jorgebucaran]

@hartbeatnt Are you sure you are using keys properly?

[hartbeatnt]

thanks for replying. I added keys and it fixed the oncreate issue. Hooray!
As for the state, it turns out that it working, just not showing that it is working.

I am invoking the action, then logging state, as follows:

      const names = await axios.get(GAME_NAMES);
      actions.set_games(names.data);
      actions.set_game(names.data[0]);
      console.log(state);

The log shows the old values of state from before the actions were fired, but when I render the state values to the DOM, they show the proper values. Any idea why that might be happening? I thought it might be an async issue, but when I wrapped the console.log in setTimeout the issue persisted

Again, thank you for the quick feedback.

[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>

[jorgebucaran]

@hartbeatnt Seems like we are good to close?

[hartbeatnt]

Yes, we are good. Thanks so much!