How initialize context for a machine created with createActorContext ?

[noliiva]

Hello there.

I'm new to xstate and trying to implement it in a React app.
I need to access the xstate context globally and this state needs to be persisted.

I've used createActorContext which works well for global access, but I couldn't find anything about context initialization in the documentation.

In v4, we could do something like this:
(example found in an old stream from stately team](https://youtu.be/M6KjEogxfQE?t=1758))

const MyContext = createActorContext(myMachine);

function App() {
  return (
    <MyContext.Provider
      machine={() =>
        myMachine.withContext({ myValue: 'initialValue' })
      }
    >
      <MyComponent />
    </MyContext.Provider>
  );
}

But this is now deprecated.

I've tried to match it with the new input api:

const MyContext = createActorContext(myMachine, { input: { myValue: null } });

function App() {
  return (
    <MyContext.Provider
      logic={() =>
        createActor(myMachine, {
          input: { myValue: 'initialValue' },
        })
      }
    >
      <MyComponent />
    </MyContext.Provider>
  );
}

But that ended up with this error : Uncaught TypeError: this.logic.getInitialSnapshot is not a function

So the only way I've found is to add a transitive state (loading) to update the context with an event, but that seems weird. 🤔

const myMachine = createMachine({
  context: ({ input }) => ({
    myValue: input.myValue,
  }),
  initial: "loading",
  states: {
    loading: {
      on: {
        LOADED: {
          target: "step1",
          actions: assign({
            myValue: ({ event }) => event.myValue,
          }),
        },
      },
    },
    step1: {
      on: {
        NEXT: "step2",
      },
    },
    [...]
  },
});

function MyComponent() {
  useEffect(() => {
    const myValue = localStorage.getItem('my.value');
    actorRef.send({ type: "LOADED", myValue });
  }, [myValue]);

  [...]
}

Is there any better way to do this ?

[davidkpiano]

It should look like this:

const MyContext = createActorContext(myMachine);

function App() {
  return (
    <MyContext.Provider
      logic={myMachine}
      options={{
        input: { myValue: 'initialValue' }
      }}
    >
      <MyComponent />
    </MyContext.Provider>
  );
}

Let me know if this works for you! I'll update the docs soon.

[noliiva]

Yes, it works perfectly!
Thank you so much for your quick answer. 🙏

[kennetpostigo]

@davidkpiano does this still apply? I just gave it a shot and saw it isn't working:

<MyMachineContext.Provider
      logic={myMachine.provide({
        actions: {
          handleSetTab: assign(({ event }) => {
            navigate({ search: { view: event.value } });

            return { tab: event.value };
          }),
        },
      })}
      options={{input: { tab: view}}}
    >
      ...
    </MyMachineContext.Provider>

[stevegg]

I'm running into this as well. The options don't seem to be applied?

const GameMain: React.FC = () => {
  const sandbox = useSandboxContext();
  return (
    // Initialize the context provider with the samdbox and game name.  These
    // are required so that the content can be loaded
    <gameContext.Provider
      logic={GameMachine}
      options={{
        input: {
          sandbox,
          gameName: name,
          logger: sandbox.logger,
        },
      }}
    >
      <div className="EngineDiv">
        <GameEngine templates={templates} />
      </div>
    </gameContext.Provider>
  );
};

My first state utilizes the sandbox and gameName and they never change from undefined.