Reset initial context on in a discard action

[ivorpad]

I have a formMachine and I want to initialize the context with data persisted in a database.

useMachine(formMachine, { context: { values: valuesFromDb() } })

Now, I want to add values to a newValues object in an onChange action so I can send these updates to the database.

onChange: assign({
  newValues: (ctx, e) => ({
    ...ctx.newValues,
    [e.key]: {value: e.value},
  }),
})

I have a couple of problems:

1. I want to append the newValues value to the initial value object so that the changes are reflected in the UI
2. I need to reset the UI's initial context on discard.
3. I need to send only the newValues object to the GraphQL mutation, not the whole initial object (this should be as easy as sending the newValues context value).

[ivorpad]

Alright, so what I did is wrap the formMachine in a function and passed the initial context to it:

export const formMachine = (initialContext) =>
  createMachine({
    context: {
      value: initialContext,
    },
    initial: "editing",
    states: {
      editing: {
        on: {
          CHANGE: assign({
            values: (ctx, e) => ({
              ...ctx.values,
              [e.key]: { value: e.value },
            }),
          }),
          CLEAR: assign({ values: initialContext }),
        },
      },
    },
  });

But I don't want the whole initialContext object to be saved in the database, I only want to save what I changed. Any help will be appreciated.

[mattpocock]

There are a few things about your question that would be much clearer in a CodeSandbox. Could you run one up for us?

[ivorpad]

I fixed the issue. This saved the day: https://xstate.js.org/docs/guides/context.html#action-order

I now run two actions, one to update the UI and another to add new values to the object I'm going to save in the database:

actions: ["onChange", "onNewValueChange"]

onChange: assign({
  values: (ctx, e) => ({
    ...ctx.values,
    [e.key]: { value: e.value },
  }),
}),
onNewValueChange: assign({
  newValues: (ctx, e) => ({
    ...ctx.newValues,
    [e.key]: { value: e.value },
  }),
}),

It looks awful but it does the job. If anyone knows how to improve it please let me know.