What is the right way to call something after an action call?

[dmitry-kurmanov]

Hello!

I've found two ways to do it:

1. use another action

const actions = {
  up: (count) => (state, actions) => {
    actions.doUp(count);
    console.log("I am after the action!!!");
  },
  doUp: count => state => {
    ...
   return state;
  }
};

but in fact when console.log run DOM not updated yet.

2. use setTimeout with 0

const actions = {
  up: count => (state, actions) => {
    setTimeout(function() {
      console.log("I am after the action!!!");
    }, 0);
    ...
    return state;
  }
};

It does what I need, but I think it is bad practice (may be not)

Could anyone please help me with it. Thanks.

[Swizz]

Hello @dmitrykurmanov,

Updating the DOM will be the last thing that will be perfomed when actions are called.
When a sequence of actions is initiated, only the last actions will be followed by a rerender.
(But IIRC an action that return null or a Promise will not result to a scheduled rerender 🤔 )

If you want to trigger another action only after the DOM is updated, you whould take a look at the update lifecycle event.
https://github.com/hyperapp/hyperapp#onupdate

But you will not have an easy way to know which actions were called before.

What are you trying to perform ? Why do you need to call the action after the DOM update ?

[dmitry-kurmanov]

@Swizz thank you for the answer. I am trying to find a way to create a third party widget (component) based on hyperapp. It is just investigation. User of that widget may want to add action listeners (before - it is easy and after). So the after listener should be call after action completely done the job. I thought about onupdate event but

you will not have an easy way to know which actions were called before

I could create repo with an example of widget if it will help.

PS I think about cross-frameworks web components based on hyperapp because of its size.

[dmitry-kurmanov]

Oh I've missed hyperapp v2 branch, I will take a look! I think we can close the issue. I will create an example and return back later :)

[jorgebucaran]

Summary

State updates are immediate, but it's impossible to retroactively change the state argument inside an action function to reflect the new state. For this reason, wired actions return the new state (technically, they return whatever the original action returns, e.g., a state slice, promise).

You can find out the new state inside the action like this.

export const bazBam = state => ({ value: !state.value })

export const fooBar = (state, actions) => {
  console.log(state) //=> {value:true}

  const newState = actions.bazBam()

  console.log(state) //=> {value:true}
  console.log(newState) //=> {value:false} 
}

import { app } from "hyperapp"
import * as actions from "./actions"

const state = { value: true }

app(state, actions, view, container)

Difference with V2

You call actions inside other actions to update different state slices or create side effects, however:

• V2 eliminates slices and state updates can only target the global state (V2 Actions #749)
• V2 side effects are produced as part of the return value of actions via effects (V2 Effects #750)