ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
2
Oct
2018
#data
#react
#javascript
#redux
#tech

Simple State Machine with Redux

2 Oct, 2018

https://bit.ly/2wIeeNU

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.


Cheers,

ilonacodes

Tags | #data #react #javascript #redux #tech
Next: Why Formik With React

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy