xState service layer

AppContextProvider.tsx

import React from "react";
import { createUserSessionService } from "services/UserSessionService";
import { createNavService } from "services/NavService";

// Wiring up our "IOC container"

const userSessionService = createUserSessionService();

// NavService depends on UserSessionService
const navService = createNavService(userSessionService); 

const dependencies = {
  userSessionService,
  navService
};

const AppContext = React.createContext(dependencies);

const AppContextProvider: React.FC = props => {
  return (
    <AppContext.Provider value={dependencies}>
      {props.children}
    </AppContext.Provider>
  );
};

export { AppContext, AppContextProvider };

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "App";
import { AppContextProvider } from "AppContextProvider";

// Wrapping our app in our "IOC container"
ReactDOM.render(
  <AppContextProvider>
      <App />
  </AppContextProvider>,
  document.getElementById("root")
);

NavBar.tsx

import React from "react";
import { useHistory } from "react-router-dom";
import { SideNav } from "SideNav";
import { useNavService } from "services/NavService";

const Navbar: React.FC = () => {
  const [navState] = useNavService(); // Inject dependency
  
  // Links automatically change based on authentication state
  // from UserSessionService
  const { links } = navState.context; 
  return (
    <>
      <SideNav
        menuItems={links}
        menuHeaderLink="/"
        menuHeaderLinkAlt="Home"
      />
    </>
  );
};

export default Navbar;

NavService.tsx

import { useContext } from "react";
import { Machine, interpret, Interpreter } from "xstate";
import { useService } from "@xstate/react";
import { AppContext } from "AppContextProvider";
import { config, NavContext, NavEvent, NavStateSchema} from "./machine";
import { UserSessionService } from "services/UserSessionService";

// Custom hook for "dependency injection"
export const useNavService = () => {
  const { navService } = useContext(AppContext);
  return useService(navService);
};

export const createNavService = (userSessionService: UserSessionService): NavService => {
  const navMachine = Machine<NavContext, NavStateSchema, NavEvent>(config);
  const navService = interpret(navMachine).start();

  // wire up state transition dependency between
  // NavService and UserSessionService
  userSessionService.onTransition(state => {
    if (state.matches("AUTHENTICATED")) {
      navService.send("SWITCH_TO_AUTHENTICATED_LINKS");
    } else {
      navService.send("SWITCH_TO_UNAUTHENTICATED_LINKS");
    }
  });
  
  return navService;
};

UserSessionService.tsx

import { useContext } from "react";
import { Machine, interpret, Interpreter } from "xstate";
import { useService } from "@xstate/react";
import { AppContext } from "AppContextProvider";
import { config, UserSessionContext, UserSessionStateSchema, UserSessionEvent } from "./machine";

// Custom hook for "dependency injection"
export const useUserSessionService = () => {
  const { userSessionService } = useContext(AppContext);
  return useService(userSessionService);
};

export const createUserSessionService = (): UserSessionService => {
  const userSessionMachine = Machine<UserSessionContext, UserSessionStateSchema, UserSessionEvent>(config);

  return (
    interpret(userSessionMachine)
      .start()
  );
};

@adamkl Got it. What I'm getting from this is that using xstate state in my components is similar to using MobX state in my components.

The value of choosing xstate over MobX likely becomes apparent when writing code to model and manipulate your state.

Could you share a couple of things that xstate makes easy compared to other libraries? What's your favorite thing about using it?