Xstate and Next.js

[eliorivero]

Hi! First of all, great work on this amazing library. It's absolutely fantastic. I'm new to it and I've been using it to model the step by step process of a purchase flow using Next.js with a top level machine. Each step in the flow is both a machine state and a Next.js page and when a page changes, I'm triggering a state change from within a listener listening to the Next.js routing events.

What's the best approach do I make this top level machine available for nested components?

Right now I've setup the machine in _app.tsx which is the application level component in Next.js and I'm injecting it to each page. That works fine in that immediate page but if I want to get it in a deeply nested component I'd have to pass that to that component. So I wonder if there's a way to get that machine with its current state in any nested component in some way like React Context for example that doesn't involve passing it down.

Thank you!

[Andarist]

You can freely put a machine into React’s context or you can even share it as a singleton in your app. Possibilities are endless 😉

Other than that it’s hard to advise something more concrete because I’m not fully sure how do u want to utilize this machine in your app. An illustrating runnable example would be appreciated.

[eliorivero]

Thanks a lot for the response.

I created a runnable project here, and this is the component file (that is placed in Step 1 page) where for example I'd like to get the context from the machine but without passing it down from the page:

https://codesandbox.io/s/admiring-perlman-ub84n?file=/pages/SomeComp.js

Will appreciate any input on this.

[Andarist]

Thank you for the demo! You are mentioning there that:

This is the component where I'd like to get the context (similar to
redux's connect()) without having to pass it down from the page where it's
placed

react-redux is putting its store into the React's context and this is what I would advise here, is there any reason why you don't want to use context for this?

[a-y-u-s-h]

This is how I do it with hooks and contexts:

I have a separate systems folder where I keep all the machines and hooks and contexts related to it. For example, let's say I want to have a state machine to be used inside of home page or for pages/index.js, Then I'll create a folder at this location: src/systems/universe/home and this folder will contain 3 files:

1. states.yaml - YAML representation of state machine.
2. options.js - A file that simply exports an object with keys actions, activities, guards and services.
3. index.js - contains variables to be exported so that this machine is usable across components (sharable, and independent services both).

This is how they look like:

states.yaml - In this example, a home page contains 3 parallel states - theme, layout and content all of which can be toggled separately (if I add on property on theme and make it target another state, we can add toggle logic to theme alone). And each atomic state has metadata that describes that state (theme's metadata contains style props for colors and borders, etc for different components on that page and layout contains style props for dimensions and grids etc, I'm using Theme UI so instead of styles I have sx in meta).

id: home
type: parallel
context:
states:
  theme:
    id: theme
    initial: default
    states:
      default:
        meta:
          container:
            sx:
              backgroundColor: combinations.retro.backgrounds.100

  layout:
    id: layout
    initial: default
    states:
      default:
        meta:
          container:
            sx:
              width: 100%
              height: 100%

  content:
    id: content
    initial: default
    states:
      default:
        meta:

options.js - In this case it's an empty thing which looks like this:

import * as X from "xstate"

export default {
  actions: {},
  activities: {},
  services: {},
  guards: {}
}

index.js - In this example I'm using deepmerge to merge the state metadata of theme and layout to create a styles variable everytime any of their states change. After you look at this code, to understand how to consume this state machine, keep reading further.

import React from "react"
import * as X from "xstate"
import states from "./states.yaml"
import options from "./options.js"
import { useMachine } from "@xstate/react"
import merge from "deepmerge"

export const machine = X.createMachine(states, options)
export const service = X.interpret(machine)

export const create = () => {
  const [state, send, service] = useMachine(machine, { devTools: true })
  const theme = state.meta[`home.theme.${state.value.theme}`]
  const layout = state.meta[`home.layout.${state.value.layout}`]
  const content = state.meta[`home.content.${state.value.content}`]
  const styles = merge(theme, layout)
  return { styles, content }
}

export const Context = React.createContext()
export const Consumer = Context.Consumer
export const Provider = p => <Context.Provider value={create()} {...p} />
export const use = () => React.useContext(Context)
export default { machine, service, Context, Provider, Consumer, use, create }

In above file create is a hook where I create an abstraction over my machine so that I don't have to import state, service or send inside my react components, I just create the event handlers as functions inside the create hook and return it in an object. So a toggle event handler would look like this and I will be able to simple use it as onClick={toggle.theme} or onClick={toggle.layout} wherever I want:

export const create = () => {
  const [state, send, service] = useMachine(machine, { devTools: true })
  const theme = state.meta[`home.theme.${state.value.theme}`]
  const layout = state.meta[`home.layout.${state.value.layout}`]
  const content = state.meta[`home.content.${state.value.content}`]
  const styles = merge(theme, layout)
  const toggle = {
    theme: () => send("toggle.theme"),
    layout: () => send("toggle.layout")
  }
  return { styles, content, toggle }
}

This is the part in index.js which makes the state machine sharable across different components in the tree -

export const Context = React.createContext()
export const Consumer = Context.Consumer
export const Provider = p => <Context.Provider value={create()} {...p} />
export const use = () => React.useContext(Context)
export default { machine, service, Context, Provider, Consumer, use, create }

If you want to share it across entire app, you'll first have to add the Provider of this state machine in _app.js file like so:

import React from "react"
import Home from "@/systems/universe/home"
import theme from "@/settings/theme"
import { ThemeProvider as Theme } from "theme-ui"
import "@/settings/theme/global.css"

export const Application = props => {
  const { Component, pageProps } = props
  return (
    <Theme theme={theme}>
      <Home.Provider>
        <Component {...pageProps} />
      </Home.Provider>
    </Theme>
  )
}

export default Application

Component which uses the shared instance of a running machine looks something like this:

import React from "react"
import System from "@/systems/universe/home"
import { Box } from "theme-ui"

const Home = () => {
  const home = System.use()
  const { styles, content } = home
  return <Box {...styles.container}></Box>
}

export default Home

Component which uses the new instance of a running machine across different react component looks something like this:

import React from "react"
import System from "@/systems/universe/home"
import { Box } from "theme-ui"

const Home = () => {
  const home = System.create()
  const { styles, content } = home
  return <Box {...styles.container}></Box>
}

export default Home

use - Creates a shared service.
create - Creates a service localized to that react component.

---

[tomByrer]

then later pull them out in classNames

Yes, I often will prototype 'the wrong way', then make it neat later.
I do miss Bracket's "inline CSS editing".

[Takhine]

@a-y-u-s-h I've just started exploring xState, my NextJs application has gotten to a point where I maintain separate contexts for different dashboards. What do you suggest for this use case where I have a global state shared across the application (initialising the context at _app.jsx works fine) and also for when I want a couple of pages, to have their own shared Context (I don't want to maintain this context at the root level). Given the nextjs **pages ** pattern I'm wondering what the best performant approach to achieve this would be. Do you think xState can solve this problem?

[a-y-u-s-h]

@Takhine Apologies for late reply. I am not sure if I am visualizing the problem statement right, but I would advise you look at bus topology pattern for this, and treat different dashboards as actors passing data to each other. If you want a shared context for the entire application, you can invoke these dashboard actors in an actor called "application" and let the "application" actor be responsible for handling all the common data, and commmunication between the actors. I like to use this as reference.

[Takhine]

@a-y-u-s-h Thanks for replying, with a little more research I came across a solution that fit my problem statement. Thought I'd let you know too, so in case of handling state for individual pages that share the same dashboard context I settled on using Zustand, given that it allows me to handle my global state outside of the React tree. For cases where my global state is shared across the App for example auth state I wrap my _app.jsx Component with an Auth Context. It's working well for me so far! Let me know your thoughts, thanks for your feedback on Xstate I will definitely explore it more in the future.

[a-y-u-s-h]

@Takhine That's great as well. But personally, I prefer to go for centralizing all the business logic within Xstate itself, so that I have to apply minimum framework glue in the long term. Zustand part I'm assuming is a part of business logic as well, so an improvement can be re-modelling the application state chart so that it contains a common context for the entire dashboard and the little components inside dashboard become actors. For the last few months, I'm trying to come up with a solution to the question "How can I model the entire web application, it's every little thing including animations and routing, everything within Xstate with as little framework glue as possible?". I've refactored the machine I described above a lot as well, but it's still a little bit confusing. Will share the thing later in a youtube video or a course or something when it's all done.

[github0013]

https://docs.pmnd.rs/jotai/integrations/xstate

Jotai + XState might be an option.
Jotai is like React's recoil.