top

An Unforgettable Way To Learn Redux- A Visual Guide

The following is a visual guide to learning Redux. One focused on the core Redux principles explained with memorable associations and custom illustrations.Are you Ready?Here we go!Consider an event you’re likely conversant with — going to the bank to withdraw cash. Even if you don’t do this often, you’re likely aware of what the process looks like.                                                                         Young Joe heads to the bank — which happens to be only 3 minutes away.Storytime.You woke up one morning and headed to the bank as quickly as possible. While going to the bank there’s just one intention/action you’ve got in mind i.e to WITHDRAW_MONEYYou want to withdraw some money from the bank.                                                       Young Joe heads to the bank with the intention to withdraw some money.Here’s where things get interesting.When you get into the bank, you go straight to the cashier to make your request known, right?                                                                  Young Joe is at the bank! He goes straight to see the Cashier and makes his request known.Wait, you went to the Cashier?Why didn’t you just go into the bank vault to get your money?                                                                             If only Young Joe got into the Vault. He’ll cart away with as much as he finds.After all, it’s your hard-earned money.Well, you already know that things don’t work that way. Yes, the bank has money in the vault, but you have to talk to the Cashier to help you follow a due process for withdrawing your own money.The Cashier, from their computer, then enters some commands and delivers your cash to you. Easy-peasy.                                                                                       Here’s how you get money. Not from the Vault, sorry.Now, how does Redux fit into this story?We’ll get into more details soon, but first, the terminologies. 1. The BANK VAULT is to the bank where the REDUX STORE is to Redux                                                                                              The bank vault can be likened to the Redux Store!The bank vault keeps the money in the bank, right?Well, within your application, you don’t spend money. Instead, the STATE of your application is like the money you spend. The entire user interface of your application is a function of your state.Just like the bank vault keeps your money safe in the bank, the state of your application is kept safe by something called a STORE. So, the STORE keeps your “money” i.e state, intact.Make sure that you understand and remember this clearly.The Redux Store can be likened to the Bank Vault. It holds the state of your application — and keeps it safe.This leads to the first Redux principle:Have a single source of truth: The state of your whole application is stored in an object tree within a single Redux store.Don’t let the words confuse you.In simple terms, with Redux, it is advisable to store your application state in a single object managed by the Redux STORE. It’s like having ONE VAULT as opposed to littering money everywhere along the bank hall. 2. Go to the bank with some ACTION in mindIf you’re going to get any money from the bank, you have to go in with some intent or action to withdraw money.If you just walk into the bank and roam around, no one’s going to give you money. You may even end up been thrown out by the security.The same may be said for Redux.Write as much code as you want, but if you want to update the state of your Redux application (like you do with setState in React), you need to let Redux know about that with an ACTION.In the same way, you follow a due process to withdraw your own money from the bank. Redux also accounts for a due process to change/update the state of your application.Now, this leads to the Redux principle #2.The State is read-only:The only way to change the state is to emit an action, an object describing what happened.What does that mean in plain language?When you walk to the bank, you go there with a clear action. In this example, you want to withdraw some money.If we chose to represent that process in a simple Redux application, your action to the bank may be represented by an object.One that looks like this:{  type: "WITHDRAW_MONEY",  amount: "$10,000" } In the context of a Redux application, this object is called an action! It always has a type field that describes the action you want to perform. In this case, WITHDRAW_MONEY.Whenever you need to change/update the state of your Redux application, you need to dispatch an action.Don’t stress over how to dispatch an action yet. Just understand what the principle says. Programmatically, here’s how a store is created: import { createStore } from "redux"; //an import from the redux lib import reducer from "./reducers" const store = createStore(reducer); //see the next section for how the imported reducer is created 3. The CASHIER is to the bank where the REDUCER is to REDUXAlright, take a step back.Remember that in the story above, you couldn’t just go straight into the bank vault to retrieve your money from the bank. You had to see the cashier first.Well, you had an action in mind, but you had to convey that action to someone, the Cashier, which in turn communicated (in whatever way they did) with the vault that holds all of the bank’s money.                                                                                                   The Cashier and Vault communication!The same may be said for Redux.Like you made your action known to the Cashier, you have to do the same in your Redux application. If you want to update the state of your application, you convey your ACTION to the REDUCER — our own Cashier.This process is mostly called DISPATCHING an ACTION.Dispatch is just an English word. In this example, and in the Redux world, it is used to mean sending off the action to the reducers.The REDUCER knows what to do. In this example, It will take your action to WITHDRAW_MONEY and ensure you get your MONEY.In Redux terms, the money you spend is your STATE. So, your reducer knows what to do, and it always returns your NEW STATE.That wasn’t so hard to grasp, right?And this leads to the last Redux principle:To specify how the state tree is transformed by actions, you write pure reducers.As we proceed, I’ll explain what a “pure” reducer means. For now, what’s important is to understand that, to update the state of your application (like you do with setState in React). It is your actions that must always be sent off (DISPATCHED) to the reducers to get your NEW STATE. Never Mutate State Within the ReducersIn very simple terms, a reducer is just a function that takes in state and action, and returns a new state.export default (state, action) => {  return state; }; When returning state from reducers, there’s something that may put you off at first. However, if you are already good at ReactJS code, then you should be familiar with this already.You should not mutate the state received in your Reducer. Instead, you should always return a new copy of the state.Technically, you should never do this:export default (state=[], action) => {  return state.push('new value'); }; This is preferable:export default (state=[], action) => {  return [...state, 'new value'] };Instead of mutating (or changing) the state received from the reducer, I am returning a new array. This array has all the values of the previous state array, and also appends the ‘new value.’ Thanks to the ES6 spread operator, [...state, 'new value']Every Reducer you write should be a pure function with no side-effects i.e No API calls or update a value outside the scope of the function.Got that?Hopefully, yes.ConclusionWith this analogy, you should now have an idea of what the most important Redux actors are: THE STORE, THE REDUCER, and an ACTION.These three actors are pivotal to any Redux application. Once you understand how they work, the bulk of the deed is done.Happy coding!
Rated 4.0/5 based on 9 customer reviews
Normal Mode Dark Mode

An Unforgettable Way To Learn Redux- A Visual Guide

Ohans Emmanuel
Blog
15th Jul, 2018
An Unforgettable Way To Learn Redux- A Visual Guide

The following is a visual guide to learning Redux. One focused on the core Redux principles explained with memorable associations and custom illustrations.

Are you Ready?

Here we go!

Consider an event you’re likely conversant with — going to the bank to withdraw cash. Even if you don’t do this often, you’re likely aware of what the process looks like.


    Young Joe heads to the bank 


                                                                         Young Joe heads to the bank — which happens to be only 3 minutes away.

Storytime.

You woke up one morning and headed to the bank as quickly as possible. While going to the bank there’s just one intention/action you’ve got in mind i.e to WITHDRAW_MONEY

You want to withdraw some money from the bank.


   Young Joe heads to the bank with the intention to withdraw some money.

                                                       Young Joe heads to the bank with the intention to withdraw some money.

Here’s where things get interesting.

When you get into the bank, you go straight to the cashier to make your request known, right?

Young Joe is at the bank! He goes straight to see the Cashier and makes his request known.

                                                                  Young Joe is at the bank! He goes straight to see the Cashier and makes his request known.


Wait, you went to the Cashier?

Why didn’t you just go into the bank vault to get your money?

  If only Young Joe got into the Vault. He’ll cart away with as much as he finds.

                                                                             If only Young Joe got into the Vault. He’ll cart away with as much as he finds.

After all, it’s your hard-earned money.

Well, you already know that things don’t work that way. Yes, the bank has money in the vault, but you have to talk to the Cashier to help you follow a due process for withdrawing your own money.

The Cashier, from their computer, then enters some commands and delivers your cash to you. Easy-peasy.

  Here’s how you get money. Not from the Vault, sorry.

                                                                                       Here’s how you get money. Not from the Vault, sorry.

Now, how does Redux fit into this story?

We’ll get into more details soon, but first, the terminologies.

 

1. The BANK VAULT is to the bank where the REDUX STORE is to Redux

The bank vault can be likened to the Redux Store!

                                                                                              The bank vault can be likened to the Redux Store!

The bank vault keeps the money in the bank, right?

Well, within your application, you don’t spend money. Instead, the STATE of your application is like the money you spend. The entire user interface of your application is a function of your state.

Just like the bank vault keeps your money safe in the bank, the state of your application is kept safe by something called a STORE. So, the STORE keeps your “money” i.e state, intact.

Make sure that you understand and remember this clearly.

The Redux Store can be likened to the Bank Vault. It holds the state of your application — and keeps it safe.

This leads to the first Redux principle:

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


Don’t let the words confuse you.

In simple terms, with Redux, it is advisable to store your application state in a single object managed by the Redux STORE. It’s like having ONE VAULT as opposed to littering money everywhere along the bank hall.

the redux principle

 

2. Go to the bank with some ACTION in mind

If you’re going to get any money from the bank, you have to go in with some intent or action to withdraw money.

If you just walk into the bank and roam around, no one’s going to give you money. You may even end up been thrown out by the security.

The same may be said for Redux.

Write as much code as you want, but if you want to update the state of your Redux application (like you do with setState in React), you need to let Redux know about that with an ACTION.

In the same way, you follow a due process to withdraw your own money from the bank. Redux also accounts for a due process to change/update the state of your application.

Now, this leads to the Redux principle #2.

The State is read-only:

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


What does that mean in plain language?

When you walk to the bank, you go there with a clear action. In this example, you want to withdraw some money.

If we chose to represent that process in a simple Redux application, your action to the bank may be represented by an object.

One that looks like this:

{
 type: "WITHDRAW_MONEY",
 amount: "$10,000"
}


In the context of a Redux application, this object is called an action! It always has a type field that describes the action you want to perform. In this case, WITHDRAW_MONEY.

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

the redux principle 2


Don’t stress over how to dispatch an action yet. Just understand what the principle says. 

Programmatically, here’s how a store is created: 

import { createStore } from "redux"; //an import from the redux lib
import reducer from "./reducers"

const store = createStore(reducer);
//see the next section for how the imported reducer is created

 

3. The CASHIER is to the bank where the REDUCER is to REDUX

Alright, take a step back.

Remember that in the story above, you couldn’t just go straight into the bank vault to retrieve your money from the bank. You had to see the cashier first.

Well, you had an action in mind, but you had to convey that action to someone, the Cashier, which in turn communicated (in whatever way they did) with the vault that holds all of the bank’s money.

         The Cashier and Vault communication!

                                                                                                   The Cashier and Vault communication!

The same may be said for Redux.

Like you made your action known to the Cashier, you have to do the same in your Redux application. If you want to update the state of your application, you convey your ACTION to the REDUCER — our own Cashier.

This process is mostly called DISPATCHING an ACTION.

Dispatch is just an English word. In this example, and in the Redux world, it is used to mean sending off the action to the reducers.

The REDUCER knows what to do. In this example, It will take your action to WITHDRAW_MONEY and ensure you get your MONEY.

In Redux terms, the money you spend is your STATE. So, your reducer knows what to do, and it always returns your NEW STATE.

That wasn’t so hard to grasp, right?

And this leads to the last Redux principle:

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


As we proceed, I’ll explain what a “pure” reducer means. For now, what’s important is to understand that, to update the state of your application (like you do with setState in React). It is your actions that must always be sent off (DISPATCHED) to the reducers to get your NEW STATE.

the redux principle 3

 

Never Mutate State Within the Reducers

In very simple terms, a reducer is just a function that takes in state and action, and returns a new state.

export default (state, action) => {
 return state;
};


When returning state from reducers, there’s something that may put you off at first. However, if you are already good at ReactJS code, then you should be familiar with this already.

You should not mutate the state received in your Reducer. Instead, you should always return a new copy of the state.

Technically, you should never do this:

export default (state=[], action) => {
 return state.push('new value');
};

This is preferable:

export default (state=[], action) => {
 return [...state, 'new value']
};


Instead of mutating (or changing) the state received from the reducer, I am returning a new array. This array has all the values of the previous state array, and also appends the ‘new value.’ 

Thanks to the ES6 spread operator, [...state, 'new value']

Every Reducer you write should be a pure function with no side-effects i.e No API calls or update a value outside the scope of the function.

Got that?

Hopefully, yes.


Conclusion

With this analogy, you should now have an idea of what the most important Redux actors are: THE STORE, THE REDUCER, and an ACTION.

These three actors are pivotal to any Redux application. Once you understand how they work, the bulk of the deed is done.

Happy coding!

Ohans

Ohans Emmanuel

Author

Snr. Frontend Engr @kudidotai. Author, Understanding Flexbox. I help companies build interactive and scalable consumer-facing products.  I use my extensive knowledge of Javascript, HTML, and CSS to improve experiences on web applications, however how complex. 


Website : https://github.com/ohansemmanuel

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

keonhacai

31 October 2018 at 12:08pm
I was recommended this website by my cousin. I am now not positive whether this submit is written by way of him as no one else know such targeted about my problem. You are amazing! Thanks! http://sancoso.net/keo-nha-cai-ty-le-ca-cuoc.html

John Smith

30 November 2018 at 3:28pm
Your presentation is awesome.

keo nha cai

30 November 2018 at 3:29pm
Excellent web site you got here difficult to find high quality writing like yours nowadays. I honestly appreciate people like you! Take care.

Jones Johnson

30 November 2018 at 3:32pm
Nice blog.

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount