The State of 

David Khourshid

The start of  

State management

State orchestration

What's new with XState?

import { createModel } from 'xstate/lib/model';

const userModel = createModel({
  name: '',
  age: 0
}, {
  events: {
    updateName: (name: string) => ({ name }),
    updateAge: (age: number) => ({ age })
  }
});

const userMachine = userModel.createMachine({
  // ...
  
  on: {
    updateName: {
      actions: userModel.assign({
        // strongly typed!
        name: (_, event) => event.name
      })
    }
  }
});

Strongly-typed
models

New Features

import { fromReducer } from 'xstate/lib/behaviors';

const countBehavior = fromReducer(
  (count, event) => {
    if (event.type === 'INC') {
      return count + 1;
    } else if (event.type === 'DEC') {
      return count - 1;
    }

    return count;
  },
  0 // initial state
);

const countMachine = createMachine({
  invoke: {
    id: 'count',
    src: () => fromReducer(countReducer, 0)
  },
  on: {
    INC: {
      actions: forwardTo('count')
    },
    DEC: {
      actions: forwardTo('count')
    }
  }
});

Reducer actors

New Features

import { createMachine, createSchema } from 'xstate';

const machine = createMachine({
  schema: {
    actions: createSchema<
      { type: 'greet'; message: string } | { type: 'sayHello' }
    >()
  },
  entry: [
    { type: 'greet', message: 'hello' },
    { type: 'sayHello' },

    // @ts-expect-error (missing `message`)
    { type: 'greet' },

    // @ts-expect-error
    { type: 'other' }
  ]
});

Strongly-typed
actions

Upcoming Features

const ToggleButton = () => {
  // ...
  return <button
    disabled={!state.can('TOGGLE')}
    onClick={() => state.send('TOGGLE')}
  >
    Toggle me!
  </button>;
}

Can you send
this event?

Upcoming Features

Deep actor
persistence

Upcoming Features

Deep actor
persistence

Upcoming Features

  • @xstate/fsm
  • @xstate/test
  • @xstate/graph
  • @xstate/inspect
  • @xstate/react ⚛️
  • @xstate/vue 💚
  • @xstate/svelte 🧡

Current Modules

  • @xstate/fsm
  • @xstate/test
  • @xstate/graph
  • @xstate/inspect
  • @xstate/react ⚛️
  • @xstate/vue 💚
  • @xstate/svelte 🧡
  • @xstate/parser
  • @xstate/cli
  • @xstate/form
  • @xstate/router
  • @xstate/query

Current Modules

Future Modules

v5

Alpha Coming Soon

import { and, or, not } from 'xstate/guards';

const someGuard = () => false;

const someMachine = createMachine({
  // ...
  on: {
    EVENT: {
      target: 'somewhere',
      guard: and([
        'stringGuard',
        or([{ type: 'anotherGuard' }, not(someGuard)])
      ])
    }
  }
});

Higher-order
guards

Coming in v5

const machine = createMachine({
  // ...
  on: {
    // "mouse", "mouse.click", "mouse.move.out", etc.
    'mouse.*': {/* ... */}
  }
});

Partial
wildcards

Coming in v5

stately.ai/viz

stately.ai/registry

Stately Editor

Beta coming soon

Thank you React Finland.

The State Of XState

By David Khourshid

The State Of XState

  • 180
Loading comments...

More from David Khourshid