statecharts / xstate-viz

MIT License
314 stars 63 forks source link

Crushing because of null assignment to context value #65

Open nixtaxe opened 4 years ago

nixtaxe commented 4 years ago

Description I was playing around with the state machine from this article and then tried to visualize it but due to my mistake in code the page crushed with an error "TypeError: "e.assignment[n] is null"". I didn't expect visualizer to crush.

Reproduction

const fetchMachine = Machine({
  id: "dogFetcher",
  initial: "idle",
  context: {
    dog: null,
    error: null,
  },
  states: {
    idle: {
      on: { fetch: "loading" },
    },
    loading: {
      invoke: {
        src: () => fetch("https://dog.ceo/api/breeds/image/random")
        .then(data => data.json()),
        onDone: {
          target: "success",
          actions: assign({ dog: (_, event) => event.data.message, 
          // mistake here
          error: null }),
          // this works fine
          // actions: assign({ dog: (_, event) => event.data.message, error: () => null }),
        },
        onError: {
          target: "failure",
          actions: assign({ error: (_, event) => event.data }),
        },
      },
      on: { cancel: "idle" },
    },
    success: {
      on: { fetch: "loading" },
    },
    failure: {
      on: { fetch: "loading" },
    },
  },
});
davidkpiano commented 4 years ago

I'm working on a new visualizer which will not have this problem.