statemachine
A statematchine allows you to wrap state with transitions. That means you can protect your logic from running in invalid states of the application.
You define a whole namespace as a statemachine, you can have a nested statemachine or you can even put statemachines inside statemachines.
import { statemachine } from 'overmind'
export const machine = statemachine({
FOO: {
TOGGLE: () => ({ current: 'BAR' })
},
BAR: {
TOGGLE: () => ({ current: 'FOO' })
}
})
You define a statemachine by setting up its states and what events to handle within each state. Each handler returns the new state of of the state machine.
You instantiate a machine by calinng its create method. This takes the initial state and any optional base state the lives across all states of the machine.
import { machine } from './myMachine'
export const state = {
myMachine: machine.create({ current: 'FOO' }, { list: [] })
}
You transition the state machine by sending events.
That means you can send TOGGLE as an event to the machine. Think of sending events as actually changing the state, but in a controlled way. You can optionally pass a payload with the event.
export const toggle = ({ state, effects }) => {
state.myMachine.send('TOGGLE', somePayload)
}
In actions you can check what state a machine is in by using the matches API.
export const toggle = ({ state, effects }) => {
if (state.myMachine.matches('FOO')) {
state.myMachine.send('TOGGLE', 'Cool')
} else {
state.myMachine.send('TOGGLE', 'Not so cool')
}
}
You can also directly use
state.myMachine.current , but please read the guide to understand the different between these two ways of checking.Last modified 2yr ago