Introducing Redux into an application - Redux for dummies

First things first, why use Redux? I mean, there is Context.js of course, and there are

props that we can pass among components, right?

Well, not quite. Passing props in React is usually done vertically (from parent to

child and vice versa), but not horizontally.

photo credit: https://techblog.appnexus.com/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb

On the other hand, using context can make it difficult to reuse components

(which is the golden feature of React, remember?).

When we have a large application, managing state can get tedious and complex.

That is where Redux jumps in. Redux allows the state to be stored in a single file,

from which all of the components can use it, no matter where they are in the component tree.

It does sound complex, but when you think about it, it actually makes things easier for us.

When we want to introduce Redux into our application, we should know

that there are three building blocks to it:

• State
• Action
• Reducers

So, imagine state as a highly guarded treasure trove. No one can access this

precious trove with golden jewelry and gems aside from the guards who never

sleep or eat. They are the only ones to have the key and they always have

their eyes on the trove, protecting everyone else to get hold of it. The guards

are in our case reducers. Only they can actually make the change in the state

(rearrange the jewelry and gems), and no one else. 

But our guards unfortunately do not have a sense of beauty/esthetics and

no idea how to organize the treasure.  The only one who knows how to organize

the treasure is the commander. He has precise instructions how and what to do,

but he has no time to do it himself. He conveys the detailed instruction to the guards

and they complete the task then.

The commander in out story is the action. The action contains information that is

sent to the reducer to change the state. Actions are essentially Javascript

objects that must the type property and optionally it contains payload (the

part of information that should be worked on by the action). Payload can

be any valid JS data type.

So let's get back to our treasure story. When the commander (action)

sends the instructions to the guards (reducers) he is sending usually

a piece of information that is twofold: first, what exactly should they do,

how should they organize the treasure, or what type of action they are

required to undertake (how should the reducers change the state), and

second thing: information which part of the jewelry should be rearranged

(because every piece has its own stamp and code on it). Sometimes

we don't have this information if the commander asks the guards to

organize the whole treasure trove. This is some type of a "coded message".

Now let's go back to the computing world. Action type (in our
coded message) is actually the instruction on

what we want to do, and the action payload is the information that

will help us go there. For example if the action type is "LOGIN",

payload is username: "user" and password : "738292".

So these user information will help us log in, that is, enable the action we want to

complete. The Javascript object will look like this:

const someAction = {

type: 'LOGIN',
payload: {
username: 'Adam',
password: 'Adam123'
}

Sending the requested action goes through dispatch() method. So we can

consider this dispatch method as a messenger between our commander and

guards (Action and Reducers).

Okay folks, that's it for this time. The next time I will talk about examples on how to use it in code more precisely.