Another one js state management library based on state machines.
Simple example
Let's say we have a button and we want to fetch some data, when clicking on it.
Simple markup:
Find our button and span in DOM.
const button = documentconst span = document
Then create our state machine with some initial state
const stater = 'IDLE_STATE'
Then we're going to describe our machine states and transitions between them.
To do that we'll use addState
and addTransition
methods.
addState
takes just a name of addable state.
addTransition
takes three arguments: from
, to
and action
. First two are pretty obvious. Third one is some king of action, which should be fired to perform a transition.
Notice, that if we want to reload data, we will make a transition from LOADED_STATE
to LOADING_STATE
.
staterstaterstaterstaterstaterstater
Of course we want to react on state changing in some way. So let's change the text inside button. We'll make it in a declarative way, by mapping texts to states.
const buttonTextMappings = IDLE_STATE: 'Load stuff' LOADING_STATE: 'Loading stuff...' LOADED_STATE: 'Here u go'
There's a helper, called bindMappings
. We will use it to map current state to text, which we want to see inside button, and in case, when we did not describe some case inside our mappings object, we'll fallback to default value.
const getButtonText =
Subscribe on state changing.
stater
You may be wondering, how will we handle side effects? There's a trigger mechanism in Fatalist. It's kinda similar to commands in Elm. We are reacting on some event by putting a trigger on it. It will be fired on a state change.
const onLoadTrigger = stater
Put click listener on our button.
button