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
Signature
- Simplified
- TypeScript
injectMachineStore = (statesFactory, initialContext?, config?) => machineStore
declare const injectMachineStore: <
States extends MachineState[],
Context extends Record<string, any> | undefined = undefined
>(
statesFactory: (
state: <Name extends string>(stateName: Name) => MachineState<Context, Name>
) => [...States],
initialContext?: Context,
config?: MachineStoreConfig<
MapStatesToStateNames<States, Context>,
MapStatesToEvents<States, Context>,
Context
>
) => MachineStore<
MapStatesToStateNames<States, Context>,
MapStatesToEvents<States, Context>,
Context
>
Required. A function that returns an array of "states". States are created using the received createState
factory function. Signature:
- Simplified
- TypeScript
statesFactory = (createState) => stateList
statesFactory: (
createState: <Name extends string>(stateName: Name) => MachineState<Context, Name>
) => [...States]
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')])
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')])
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' }
Optional. An object with the following optional properties:
{ guard, onTransition }
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.
- Simplified
- TypeScript
guard = (currentState, nextValue) => boolean
guard?: (
currentState: MachineStateShape<StateNames, Context>,
nextValue: StateNames
) => 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
})
Optional. A function that receives the MachineStore and the StoreEffect of the action responsible for the transition.
- Simplified
- TypeScript
onTransition = (currentState, nextState) => void
onTransition?: MachineHook<StateNames, EventNames, Context>
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)
})
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.