Sharing configurations between multiple states.

[dustinknopoff]

Let's say I have 2 states that should handle all the same events, in the same way except for a single event/action.

What's the best way to create the machine config for this?

Right now I have it as:

const logicEvents = {
  SET_INDEX: {
    target: "idle",
    actions: ["setIndex"],
  //...
  },
};

and in my config:

loaded: {
              on: {
                ...logicEvents,
                ADD_UNDO_REDO: {
                  actions: ["addUndoRedo"],
                },
              },
            },
            undo_redo: {
              on: {
                ...logicEvents,
              },
            },

This works but typescript is unhappy with the typing. (I'm not sure what type logicEvents should be.) Or Is there a better way?

[davidkpiano]

✏️ Please create a CodeSandbox (XState TypeScript template) reproduction of this. Thanks!

[dustinknopoff]

I found the type declaration for on in the machine configuration on?: TransitionsConfig<TContext, TEvent>; and labelled my logicEvents to match.