Can you assign context in the "middle" of an action?

[anthony-schanen-BAB]

I have an action that needs to fetch some data from an API. I want the data from this api stored as context in my machine. I don't see anyway of having an action assign context in the middle of the action implementation. How do I achieve this? Am I approaching the problem incorrectly?

Looking at the docs, I see this example, which only strictly changes the count value.

const increment = assign({ count: context => context.count + 1 });
const decrement = assign({ count: context => context.count - 1 });

const countMachine = createMachine({
  initial: 'start',
  context: { count: 0 }
  states: {
    start: {
      // Named function
      entry: increment
    }
  }
});

I am lost as to where to put my API call code if I want a value from elsewhere. is it after => on this line?

const increment = assign({ count: context => 
//API code block
context.count = resultFromAPI });

I am also unsure how assign is going to work when I go to another state. This action also has a state transition depending on the value of resultFromAPI

Apologies if my question is unclear, but I am not sure if I am approaching the problem correctly / using xState correctly

[asfktz]

You can't chain Async behavior in actions like you're trying to achieve here.
For that you can use invoke.

With XState 4:

const countMachine = createMachine({
  initial: 'start',
  context: { count: 0 }
  states: {
    start: {
      invoke: {
        src: () => callApi(),
        onDone: {
           actions: assign({ count: (ctx, event) => event.data })
        }
      }
    }
  }
});

With XState 5:

const countMachine = createMachine({
  initial: 'start',
  context: { count: 0 }
  states: {
    start: {
      invoke: {
        src: fromPromise(callApi),
        onDone: {
           actions: assign({ count: ({ event }) => event.data })
        }
      }
    }
  }
});