Redux Tutorial

Teach Redux to 5 years old

Learn Redux with the Bank analogy

This is a reference to a great book Understanding Redux by Emmanuel Ohans. You can follow the link and get the book. The event described in a book which can be understood very easily by any 5 years old goes something like this.

Consider someone who has given you a task to get some money out of a bank. The intention ( action ) you have in your mind is to withdraw money from the bank. In JavaScript, we can represent it as WITHDRAW_MONEY. The first step when you enter the bank is to talk to a cashier and ask them to get your money out of the safe. You never just go to a bank and just went straight to the safe, get your money, and left. Let’s define the terminology for this scenario.

Redux Store ( Bank )

The money bank kept is in the vault. The analogy of money is related to the state of the application. You can add more money or get some money out of the bank, similarly, the state can be updated with a new value or you can reduce the value inside of a state.

money = state

Now consider the whole bank, it has the cashiers, computers, and all other stuff to make it operational. For the state to work properly, we have something called the store, which is like a bank in our case.

bank = store

The store holds the state and keeps it safe.

Redux principle #1:

Have a single source of truth: The state of your whole application is stored in an object tree within a single Redux store.

In simple language, the application state is stored in a single object managed by the Redux store.

Actions

Action in the real world can be defined as a process of doing something. So in order to update anything in your state, we need to act on something. In our bank example, we need to act by talking to a cashier and ask them to release our money.

Redux principle #2

state is read only:

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

In Redux, we can define our action by an object.

the below is an action object ( simply called action):

{
type : "WITHDRAW_MONEY",
amount : "1000"
}

The action object always has a type field that describes the action you want to perform. In our case, it is WITHDRAW_MONEY.

And always remember the following line as well:

Whenever you need to change or update the state of your Redux application, you need to dispatch an action.

Reducer ( cashier ):

As we discussed that there is no possible way of getting money directly from the bank and we have to talk to the cashier to get our money. In our case, the cashier is the reducer. It will go to the vault and get the money. The whole process is called dispatching an action.

Reducer ( cashier ) has the knowledge of how to update the state ( get the money ) and ensure states get updated ( you get the money ). Reducers will always return to the new state.

Redux principle #3

To specify how the state tree is transformed, you write pure reducers.

To understand that, to update the state of your application (like you do with setState updater function in React) your actions must always be sent off (dispatched) to the reducers to get your new state.

In the future lesson, we will see how Redux works in full detail.

--

--

--

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Android & iOS Tic-Tac-Toe using ReactNative

React

JavaScript as a Girlfriend

Implementing Automatic SMS Verification for websites: OYO

Boost Your JavaScript Jetpack knowledge

The Final Guide On Promises and Asynchronous JavaScript

Some code.

Resource Mapping in Adobe Experience Manager (AEM)

Resource Resolver Factory config

Fitness Blender Clone

Javascript Coding Challenges-part01

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saranjeet Singh

Saranjeet Singh

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .

More from Medium

React components | Functional vs. class

Should Frontend Devs Care About Performance?

Importance of Fragments in Optimising React Applications

How to organize React components