Simple State Machine with Redux

The last days I am working on the project, which should include the state machine. Implementing this project with React, I decided to use the Redux framework to manage state in my React application. Moreover, thanks to redux store we can debug data (in one place) easily.

At first, I thought how to structure the data (a nested array of states and of its transitions — switching from one state to another. ). As result, I found that I will have only one state to manage all state transitions via the action type ‘MAKE_TRANSITION’ that will trigger a transition and provide different behaviour for the same action depending on current state. The current state changes by id, switching to the nextState of the transition.

Below, I have put the example of the data stored as an initial state of the reducer with the description afterward:

const initState = {
    currentState: 'greeting',
    states: [
        {
            id: 'greeting',
            payload: {...},
            transitions: [
                {
                    trigger: {...},
                    nextState: 'do-you-like-to-start'
                }
            ]
        },
        {
           id: 'do-you-like-to-start',
           payload: {...},

           transitions: [
               {
                    trigger: {...},
                    nextState: 'ask-for-name'
               },
               {
                    trigger: {...},
                    nextState: 'more-details'
               }
           ]
        },
    ]
}

currentState: the state the application is currently in

states: contains all possible states of the state machine

id: the identifier of the state

transitions: allow to make the next logical move to the nextState

payload: touched data to each state for state machine

trigger: when transition should happen

case t.MAKE_TRANSITION:
    return {
        ...state,
        currentState: action.nextState
    }

Above you see the implementation of the reducer with the “MAKE_TRANSITION” action.

That’s it. Thank you for reading! I hope you liked the possible data representation of the state machine. If you have any questions be free to contact me per email, Twitter or Instagram.

ilonacodes