Skip to main content

injectMachineStore

import { injectMachineStore } from '@zedux/machines'

An injector that creates and configures a MachineStore.

Accepts a statesFactory function, optional initial context state, and an optional config object.

const cyclingStore = injectMachineStore(stateFactory, initialContext, {
  guard,
  onTransition,
})

Zedux state machines are only designed for simple use cases where the high-level API and automatic TypeScript types can give quick gains. If you need more power, use XState.

Example​

Live Sandbox
123456789101112131415161718192021222324252627282930313233
const themeAtom = atom('theme', () => {
const store = injectMachineStore(
state => [
state('light').on('toggle', 'dark'),
state('dark').on('toggle', 'light'),
],
{ count: 0 },
{
onTransition: machine =>
machine.setContext(context => ({ count: context.count + 1 })),
}
)

return api(store).setExports({ send: store.send })
})

function Theme() {
const [{ context, value }, { send }] = useAtomState(themeAtom)

return (
<div style={value === 'dark' ? { background: '#444', color: '#fff' } : {}}>
<label>
<input
checked={value === 'dark'}
onChange={() => send('toggle')}
type="checkbox"
/>
<span>{value} mode</span>
</label>
<div>Toggle Count: {context.count}</div>
</div>
)
}

Signature​

injectMachineStore = (statesFactory, initialContext?, config?) => machineStore
statesFactory

Required. A function that returns an array of "states". States are created using the received createState factory function. Signature:

statesFactory = (createState) => stateList
createState

A function that accepts a single string - the name of the state. Returns a MachineState. This function is often abbreviated as simply state or even s:

injectMachineStore(state => [state('a'), state('b')])
injectMachineStore(s => [s('a'), s('b')])
Returns

An array of MachineStates created using the createState factory function.

The first state in this list will become the initial state of the machine.

injectMachineStore(state => [state('initial'), state('other')])
initialContext

Optional. An object or undefined if no context.

If set, this will become the initial value of the MachineStore's .context state property.

const store = injectMachineStore(stateFactory, { foo: 'bar' })
store.getContext() // { foo: 'bar' }
config

Optional. An object with the following optional properties:

{ guard, onTransition }
guard

Optional. A function that receives the MachineStore's current state and the .value string the machine is about to transition to and should return a boolean.

guard = (currentState, nextValue) => boolean

This function is called every time the state receives an event that will transition the machine to a new state.

Return true to allow the transition

Return false (or any falsy value) to prevent the transition

const store = injectMachineStore(statesFactory, initialContext, {
  guard: (currentState, nextValue) => !currentState.context.isPaused
})
onTransition

Optional. A function that receives the MachineStore and the StoreEffect of the action responsible for the transition.

onTransition = (currentState, nextState) => void

This function is called every time the MachineStore transitions to a new state (after the transition has finished).

const store = injectMachineStore(statesFactory, initialContext, {
  onTransition: (machineStore, storeEffect) => console.log(storeEffect)
})
Returns

A MachineStore.

This store's initial .value will be set to the first state returned from the statesFactory.

This store's initial .context will be set to the passed initialContext (if any).

injectMachineStore() will also register all guards and listeners on all individual states as well as the universal guard and onTransition listener.

See Also​