Another one js state management library based on state machines.
Let's say we have a button and we want to fetch some data, when clicking on it.
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 takes just a name of addable state.
addTransition takes three arguments:
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
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.
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.