How to get value and re-render from an invoked actor in toggled state

[Abebe123000]

In the code below, the value of counterActor changes, but the counter on the screen does not change because there is no rerendering.

I thought about using useSelector, but I couldn't use it properly because the state toggles.

What's the best way to do this?

Is it a bad design to invoke with a state that toggles in the first place?

I'm a beginner with this library, so I may be thinking differently.

import './App.css'
import { useMachine } from '@xstate/react';
import { toggleMachine } from '../toggleMachine';

export default function App() {
  const [state, send] = useMachine(toggleMachine);

  const counterActor = state.children.counter;
  const counterState = counterActor?.getSnapshot();
  // const count = useSelector(counterActor, (snapshot) => snapshot.context.counter)

  return (
    <div>
      <h1>XState Toggle + Counter Sample</h1>
      <button onClick={() => send({ type: 'TOGGLE' })}>
        {state.matches('enabled') ? 'Enabled' : 'Disabled'}
      </button>
      {state.matches('enabled') && counterState && (
        <div style={{ marginTop: 16 }}>
          <div>Count: {counterState.context.count}</div>
          {/* <div>Count: {count}</div> */}
          <button onClick={() => counterActor?.send({ type: 'INCREMENT' })}>+</button>
          <button onClick={() => counterActor?.send({ type: 'DECREMENT' })}>-</button>
        </div>
      )}
    </div>
  );
}

import { createMachine } from 'xstate';
import { counterMachine } from './counterMachine';

export type ToggleEvent =
  | { type: 'TOGGLE' };

export const toggleMachine = createMachine({
  /** @xstate-layout N4IgpgJg5mDOIC5QBcD2UoBswDoIEtYBDAI2wgGIAVAeQHE6AZAUQG0AGAXUVAAdVY+ZPlQA7HiAAeiAIwAmAKw4AHAHZlyxQGYZANhnyALFoA0IAJ6I5inFuPLdCuarmHlCmQoC+Xs2gzYOGCipOTU9ExsXBL8gsJiEtIIero47OnpcjLs2TkKhmaWCBo4CspaFca6qgCcMqrGPr4goqgQcBL+WGAxAkIi4khSiAC0uoWjqRnpurp2quw17Do+fujdeIShkL1xA4mIhnITCDWGOLOX6loNctU1qyBdgcHbELv9CUNJcku28gp2Ed2A4tAoTsoZKVpiCtJp1IYml4gA */
  id: 'toggle',
  initial: 'disabled',
  types: {} as {
    events: ToggleEvent;
  },
  states: {
    disabled: {
      on: { TOGGLE: 'enabled' }
    },
    enabled: {
      invoke: {
        id: 'counter',
        src: counterMachine
      },
      on: { TOGGLE: 'disabled' }
    }
  }
});

import { createMachine, assign } from 'xstate';

export interface CounterContext {
  count: number;
}

export type CounterEvent =
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' };

export const counterMachine = createMachine({
  id: 'counter',
  initial: 'active',
  types: {} as {
    context: CounterContext;
    events: CounterEvent;
  },
  context: {
    count: 0
  },
  states: {
    active: {
      on: {
        INCREMENT: {
          actions: assign(({ context }) => ({
            count: context.count + 1
          }))
        },
        DECREMENT: {
          actions: assign(({ context }) => ({
            count: context.count - 1
          }))
        }
      }
    }
  }
});

[Abebe123000]

Sorry. I solved it myself. Thank you.

import './App.css'
import { useMachine, useSelector } from '@xstate/react';
import { toggleMachine } from '../toggleMachine';

export default function App() {
  const [state, send, toggleActor] = useMachine(toggleMachine);
  const counterActor = useSelector(toggleActor, (snapshot) => snapshot.children.counter)
  const count = useSelector(counterActor, (snapshot) => snapshot?.context.count)

  return (
    <div>
      <h1>XState Toggle + Counter Sample</h1>
      <button onClick={() => send({ type: 'TOGGLE' })}>
        {state.matches('enabled') ? 'Enabled' : 'Disabled'}
      </button>
      {state.matches('enabled') && (
        <div style={{ marginTop: 16 }}>
          <div>Count: {count}</div>
          <button onClick={() => counterActor?.send({ type: 'INCREMENT' })}>+</button>
          <button onClick={() => counterActor?.send({ type: 'DECREMENT' })}>-</button>
        </div>
      )}
    </div>
  );
}