How does Redux work

In a recent interview, I was asked how Redux works in a basic TODO application. I need to tell the interviewer what happens when you enter the form and click the submit button. I didn’t have a computer in front of me, just a piece of paper and the back of my resume.

Pen in hand, I sat thinking for a moment.

I’ve been in this situation before — I was like a deer in the technical interview section. Fortunately, I had overcome difficulties in my previous technical interviews, so it wasn’t so bad.

In fact, interview is a skill, to do better, you have to keep failing, because only in failure can you find your weakness, can you make progress. That’s why I like to write about the questions I’m asked in interviews. It allows me to delve into the rationale behind the problem and get better. And I advise others to do the same.

Keep learning and keep improving!

First of all, what is a Redux?

The official documentation for Redux is as follows:

Predictable state Container for JavaScript apps. (Not to be confused with a WordPress framework — Redux Framework.)

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).

In short, Redux allows you to manage Web application state in any JavaScript framework such as React,Meteor, or Angular.

Redux was inspired by Flux, an architectural pattern created by Facebook engineers.

What makes Redux so special?

In short, Redux gives you a single object to store the state of your entire app — state data from your background API or external API, navigation state, user information, button toggle state, and so on.

Its advantages lie in better scalability and the ability to deal with problems quickly.

How does Redux work?

The core concepts of Redux include: Store, Actions, Reducers, and Subscriptions.

Initial State

Initial state is the initial value of the state.

When you walk down the aisle at the grocery store, think about what you see. There are cans, fruit, bread, milk, and grocery cats (if you live in New York) :

Actions/Dispatches

Next we need to go into the store and see what we need to buy. Analogous to Redux, every action can change initial State, meaning anything you do can change everything around you.

We call action changes dispatches.

Story – the Actions

Reducers

We now have actions that let us go into the store and do some actions, but now we need something that explains those actions.

These are what we call reducers.

Reducers accepts two parameters, Initial State and Action. The action determines how the Reducer handles the state.

Story – Reducer

Store

We have actions and a Reducer that can handle them. In other words, once we enter the grocery store, we can now fully interact with the grocery store. However, we need the final step — Store. It is the container for state. To create a store, we need to provide reducer and Initial state as parameters:

Story – Store

You can now grab the Bodega object from the store at any point using store.getstate (). Let’s do that while walking through every action/dispatch:

Now you can use **store.getState()** to get a store object from a store at any time. Let’s do this every time we fire an action:

Redux – Use store.getState() to get the current state

Subscribe

You can also subscribe to the store for any changes or updates. This can be very useful as it actively listens for any actions that are dispatched that potentially change the state.

You can use subscribe to subscribe to store changes or updates. This can be very useful because it actively listens for any action that might change the state.

Story – Subscriptions

As shown above, when the cat is neutral, console.log is printed until PET_BODEGA_CAT action is triggered (dispatch).

Apply it To the To Do application

Now we have an initial understanding of how redux works — actions are sent to the Reducer via dispatch to change the initial state in the Store. We can apply this To the To Do application

Initial State

First, we need a place To store all of our To Do lists. Here we use an array:

Redux – Initialization state 👆

Actions/Dispatches

Next we need to define actions to assign to the Reducer. This is a little more complicated than the above example, so we need a dynamic value here. In other words, we need to get the input value from the input, so in this case, our action needs to pass in a parameter (toDoValue).

Story – the Action/Dispatch 👆

Reducers

We need a Reducer to determine what needs to be done based on the actions.

Redux – Reducer – Process the distributed actions and change the state 👆

As shown in the code above, when action ADD_TODO is called, once it is in the Reducer, the Reducer matches the type of the action, or if it is ADD_TODE it is taken from action.todo and added to the array toDos.

The whole process of To Do App using Redux is as follows:

  • Enter the text ‘Buy Food’ in the input
  • The data is collected when the submit button is clicked
  • Data is passed to the action, which is passed to the Reducer via dispath
  • Reducer reads the action and decides what to do
  • Reducer adds the passed data to the initial state of the toDos array
  • The new state (the new toDos array) is returned