DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Redux Principles
Raushan Kumar
Raushan Kumar

Posted on

Redux Principles

Redux is a predictable state container. It stores the state of your application. It stores and manages the application state.

In redux, all state transitions are explicit and is possible to keep track of them.

Basically, there are three principles of redux:

1. First Principle:

"The state of your whole application is stored in an object tree within a single store"

Maintain our application state in a single object which would be managed by the Redux store.

example:
Let's assume we are tracking the number of ice-cream at the ice-cream parlor

{
   numberOfIceCreams: 10
}

2. Second Principle:

"The only way to change the state is to emit an action, an object describing what happened"

To update the state of your app, you need to let redux know about that with action.

example:
Let the shopkeeper know about action - 'BUY_ICECREAM'

{
   type: BUY_ICECREAM
}

3. Third Principle:

"To specify how the state tree is transformed by actions, you write pure reducers"

Reducers - (prevState, action) => newState

example:
Reducer is the shopkeeper.

const reducer = (state, action) => {
   switch(action.type) {
     case BUY_ICECREAM:
        return {
           numberOfIceCreams: state.numberOfIceCreams - 1
         }
     }
}

Thank You, Happy Coding!!

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await