DEV Community

Discussion on: Replacing Vuex with XState

Collapse
danroc profile image
Daniel da Rocha

One general question:

How do you deal with notifications? Let's say you have a fetch action which then transitions to either a 'sucess' or a 'failed' state. As in the docs, if you are using invoke, you could do something like:

      onError: {
          target: 'failure',
          actions: assign({
            errorMessage: (context, event) => {
              // event is:
              // { type: 'error.execution', data: 'No query specified' }
              return event.data;
            }
          })
        },

Would you then have a watcher on your frontend checking the value of errorMessage, or would you just watch for the 'failure' state and react accordingly?

Or something else completely?

Collapse
felix profile image
Felix Guerin Author • Edited on

I guess both approaches are valid.

In the app I mention in the post I just assign the error to a context property. The component then accesses it via a computed property and an error message appears when there is a value.

You could also conditionally show the error message depending on the machine's state (success, error, etc.), which is what I did initially. In my case though, the error state was identical to the idle state, just with an error message shown. I didn't see a reason to have an error state then.

I'm still unsure if the approach I took is valid in the world of statecharts but it works!