Update context in mutable way with assign

[ghost]

I wonder is there any possible pitfalls with using assign action in mutable way like in example below

const titleMachine = createMachine({
  id: 'title',
  context: {
    title: null
  },
  initial: 'init',
  states: {
    init: {
      entry: [ assign((ctx) => { ctx.title = 'New Title' } ]
    },
  ...
  }
});

I didn't found any mention of this usage in official documents but in first view it works fine.

[mattpocock]

You'll definitely get a kick out of using @xstate/immer. Importing assign from there will allow you to implement the above code as it is.

[ghost]

Thanks, I heard about immer, but I wonder, could I use such a construction without using immer, is there would be any problems?

[mattpocock]

Yes, you'd need to use immer in order to mutate the context like this. The function inside the 'assign' must return the new context, otherwise it won't cause a change.

[ghost]

But it works for me https://codesandbox.io/s/festive-goldstine-un8in
I've wrote a couple of machines and then I noticed that I use mutations in assign action but all works fine. And I don't know should leave the code as is, or it would be better to refactoring all the assign actions to use correct approach without mutations.

[davidkpiano]

You will start to find problems as soon as you use the same machine definition in other places, as the .context will be mutated.

Also, state.history might have the same context values as state since mutation changes context across histories, which can lead to unintended side-effects. For example:

// mutation!
actions: assign((ctx, e) => ctx.x = e.value)

// ...

service.subscribe(state => {
  // this will always be 0
  const velocity = state.context.x - state.history.context.x;
});

[ghost]

I see, thanks a lot!