Help: service.send not working in this particular case.

[a-y-u-s-h]

Hi,

In a project, I am using React. To explain the issue in short - I created a machine and a service. I used that machine in a hook and created context, provider and consumer and exported them all (so I can use the event handlers and data from that service locally and globally in my React application). Here's the sandbox and here's the explanation -

The structure of my state machine looks like this:

.
├── index.js
├── options.js
└── states.yaml

• states.yaml file contains a YAML representation of the state machine.
• options.js file simply exports an object with actions, activities, services, and guards as keys and contains the implementations of the state machine.
• index.js creates the variables required for sharing the service across different components.

This is how index.js looks like:

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

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

export const create = () => {
  /*
    ======================================
      A hook that creates a service and
      abstracts out functionality of the
      machine into well named custom event handlers
      and data.
    ======================================
  */
  const [state, send, service] = useMachine(machine, { devTools: true })

  const exporter = {
    data: state?.context?.exporter,
    construct: payload => send("exporter.construct", { payload }),
    download: () => send("exporter.download"),
    reset: () => send("exporter.reset")
  }

  const importer = {
    data: state?.context?.importer,
    upload: payload => send("importer.upload", { payload }),
    reset: () => send("importer.reset")
  }

  const creator = {
    data: state?.context?.creator
  }

  const modifier = {
    data: state?.context?.modifier
  }

  const sketch = {
    data: state?.context?.sketch
  }

  return { importer, exporter, creator, modifier, sketch }
}

/*
  ======================================
    Variables you'll need to globally
    share the service across multiple 
    React components.
  ======================================
*/
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 }

---

Above machine can be imported by folder and used anywhere and it works like it should. Issue arises in this one component (named Sketch) which takes the objects containing event handlers of the invoked machine as its prop and then uses it in a function, which in itself is return value of a higher order function to be used later by P5.js and create a canvas out of the return value. Usage is shown below -

import Editor from "@/systems/organisms/editor"
import Sketch from "@/components/atoms/sketch"

const Playground = () => {
  /*
    ======================================
      Using `.use` function implies that you're
      using the globally shared service of the editor
      and not creating a new one instead. It calls
      React.useContext behind the scenes.
    ======================================
  */
  const editor = Editor.use()
  return (
    <>
            <Sketch background="gold" store={editor}>
             {settings => s => {
                s.setup = () => {
                  s.createCanvas(
                    settings.dimensions.width,
                    settings.dimensions.height
                  ).parent(settings.parent)
                  s.angleMode(s.DEGREES)
                  s.colorMode(s.RGB)
                  s.rectMode(s.CENTER)
                  s.ellipseMode(s.CENTER)
                  s.textAlign(s.CENTER, s.CENTER)
                }

                s.draw = () => {
                  s.background(settings.background || 0)
                }

                s.update = props => {
                  const editor = props.store
                  const exporter = editor.exporter
                  /*
                    ======================================
                      Line below is equivalent to saying
                      service.send("exporter.construct", { payload })
                      and should update exporter.data property of the state's
                      context everywhere, but it doesn't, why? Also upon doing
                     service.send("exporter.construct", { payload }) directly, 
                     the return value comes out to be the next
                     state of service, but it doesn't update the service itself.
                     Javascript objects are passed by reference, so this should have
                     worked too.
                    ======================================
                  */
                  exporter.construct({ name: "hello.txt", content: "hello" })
                }

                s.windowResized = () => {
                  s.resizeCanvas(
                    settings.dimensions.width,
                    settings.dimensions.height
                  )
                }
              }}
            </Sketch>
    </>
  )
}

export default Playground

And following is the implementation of Sketch -

const sketch = settings => s => {
  s.setup = () => {
    s.createCanvas(
      settings.dimensions.width,
      settings.dimensions.height
    ).parent(settings.parent)
    s.angleMode(s.DEGREES)
    s.colorMode(s.RGB)
    s.rectMode(s.CENTER)
    s.ellipseMode(s.CENTER)
    s.textAlign(s.CENTER, s.CENTER)
  }

  s.draw = () => {
    s.background(settings.background || 0)
  }

  s.windowResized = () => {
    s.resizeCanvas(settings.dimensions.width, settings.dimensions.height)
  }
}

export const Sketch = React.forwardRef(({ children, ...props }, ref) => {
  const container = React.useRef()
  const [drawing, setDrawing] = React.useState(null)

  React.useEffect(() => {
    const p5 = require("p5")
    const parent = container.current
    const width = ReactDOM.findDOMNode(parent).offsetWidth
    const height = ReactDOM.findDOMNode(parent).offsetHeight
    const dimensions = { width, height }
    const options = { dimensions, parent, ...props }
    setDrawing(new p5(children(options), parent))
  }, [])

  React.useEffect(() => {
    /*
      ======================================
        Run update function of the drawing
        on every prop change.
      ======================================
    */
    if (drawing) drawing?.update(props)
  }, [props])

  return (
    <>
      <div
        ref={container}
        style={{
          width: "100%",
          height: "100%",
          position: "relative",
          top: 0,
          left: 0,
          margin: 0,
          padding: 0,
          overflow: "hidden",
          background: "transparent"
        }}
      />
    </>
  )
})

Calling service.send inside the children of Sketch (which is a higher order) function doesn't update the service. service.send does return the next state of the app, but doesn't modify the service itself. The state.value remains same for the service which was passed in.

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[a-y-u-s-h]

@Andarist Hi, I've updated with a link to codesandbox. On clicking the canvas, you'll see logs of changed context (not really changed).