[Component Store] Correct way to model nested this.updater(...) calls

[johanndev]

Hi!

I have a feeling that my whole setup is wonky, but I just want to get confirmation :)

Is it possible to call an updater method from within another updater method?

Consider this example:

 // state.someProperty == 'foo' before the invocation of outer()
public readonly outer = this.updater((state) => {
  if (state.bla == true) {
    this.inner() // call another updater function
  }
  this.myEffect()
  return {
    ...state
  }
});
public readonly inner = this.updater((state) => {
  return {
    ...state,
    someProperty: 'bar'
  }
});
public myEffect = this.effect((_) =>
  _.pipe(
    withLatestFrom(this.state$),
    switchMap(([_, state]) => {
      return this.dataService.load(state.someProperty).pipe( // someProperty == 'foo' on the first invocation
        tapResponse(
          (response) => {
            this.setResponse(response);
          },
          (e: string) => console.log(e)
        ),
        catchError((_) => EMPTY)
      );
    })
  )
);

I defined outer as an updater function because I need to access the current state and take different branches depending on the current state.
The problem is that when I access someProperty in my effect, its value is still foo, i.e. the state is only updated after this.outer returns.
I want to avoid to move the code from inner into outer, as it should remain callable on its own.

How can I tackle this?

[johanndev]

After some thinking, I found a solution: The call order has to be inverted, instead of calling updater which in turn calls the effect, the effect should call the updaters after the asynchronous action. It worked out beautifully in my case.