Pass data from guard to actions it allows to execute / actions in context of guards

[serhiipalash]

Hi! I develop a lot of forms using XState. Form fields usually have validation. When value is changed, but not valid, I need to set value and show an appropriate error message for user. Today the machine looks something like this

const formMachine = Machine(
  {
    on: {
      NAME__CHANGE: [
        {
          cond: 'isBirthDateMissingOrInTheFuture',
          actions: ['setBirthDate', 'showBirthDateError'],
        },
        {
          actions: ['setBirthDate', 'hideBirthDateError'],
        },
      ],
    },
  },
  {
    actions: {
      setBirthDate: assign({
        birthDate: (ctx, event) => event.value,
      }),

      showBirthDateError: assign({
        birthDateError: (ctx, event) => {
          let error

          if (!event.value) {
            error = 'Birth date is required'
          } else if (event.value > today) {
            error = "Birth date can't be in the future"
          }

          return error
        },
      }),

      hideBirthDateError: assign({
        birthDateError: null,
      }),
    },
    guards: {
      isBirthDateMissingOrInTheFuture: (ctx, event) =>
        !!event.value && event.value > today,
    },
  }
)

Maybe the better Api is to do like this?

const formMachine = Machine(
  {
    on: {
      NAME__CHANGE: [
        {
          guards: [
            {
              type: 'isValueMissing',
              meta: { error: 'Birth date is required' },
            },
            {
              type: 'isValueInFuture',
              meta: { error: "Birth date can't be in the future" },
            },
          ],
          actions: ['setBirthDate', 'showBirthDateError'],
        },
        {
          actions: ['setBirthDate', 'hideBirthDateError'],
        },
      ],
    },
  },
  {
    actions: {
      setBirthDate: assign({
        birthDate: (ctx, event) => event.value,
      }),

      showBirthDateError: assign({
        birthDateError: (ctx, event) => event.guard.meta.error,
      }),

      hideBirthDateError: assign({
        birthDateError: null,
      }),
    },
    guards: {
      isValueMissing: (ctx, event) => !event.value,
      isValueInFuture: (ctx, event) => event.value > today,
    },
  }
)

[ezhikov]

Using multiple guards will create multiple transitions and it is a proper way. Context is a part of you state and part of your transition, even if you don't move from one distinct state to another. And for your exact case, you can use three transitions, like this:

{
  on: {
    NAME__CHANGE: [
      {
        cond: "isValueMissing",
        actions: ["setValue", "setBirthDateValueMissingError"],
      },
      {
        cond: "isValueInTheFuture",
        actions: ["setValue", "setBirthDateValueInTheFutureError"],
      },
      {
        actions: ["setValue", "removeError"],
      },
    ],
  },
}

[serhiipalash]

Yes, you are right. I came to this yesterday myself :)

[gerwinbrunner]

Hey,

let's assume the isValueMissing returns falls, then the actions will be triggered?
Like the setBirthDateValueMissingError

Or how would you get the info which condition failed?

[Andarist]

Consider this:

{
  on: {
    NAME__CHANGE: [
      {
        // IF
        cond: "isValueMissing",
        actions: ["setValue", "setBirthDateValueMissingError"],
      },
      {
        // ELSE IF
        cond: "isValueInTheFuture",
        actions: ["setValue", "setBirthDateValueInTheFutureError"],
      },
      {
        // ELSE
        actions: ["setValue", "removeError"],
      },
    ],
  },
}

In this situation, the last actions will be executed when no previous transition gets selected. However, you won't be able to tell which specific guard didn't pass - after all, all of them didn't pass if you got to the ELSE "block" here.

[gerwinbrunner]

There is no way to define something like onError right? Mit freundlichen Grüßen Gerwin Brunner

…

On 05.08.2022, at 13:07, Mateusz Burzyński ***@***.***> wrote:  Consider this: { on: { NAME__CHANGE: [ { // IF cond: "isValueMissing", actions: ["setValue", "setBirthDateValueMissingError"], }, { // ELSE IF cond: "isValueInTheFuture", actions: ["setValue", "setBirthDateValueInTheFutureError"], }, { // ELSE actions: ["setValue", "removeError"], }, ], }, } In this situation, the last actions will be executed when no previous transition gets selected. However, you won't be able to tell which specific guard didn't pass - after all, all of them didn't pass if you got to the ELSE "block" here. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

[Andarist]

You might be interested in this RFC: statelyai/rfcs#4