How does ReactJS manage its state with React Redux?

Have you ever searched google with the phrases “simple redux example”, “redux tutorial”, and “React Redux tutorial” and ended up not understanding even the basics? Well, you are not alone.

This tutorial will help you to understand the basics of react-redux and the code is going to be simple, like seriously simple. We are not even going to do a to-do list app.

The code involves two pages, one page (page1) will store value using redux next page (page2) will display that.

Note: This tutorial is purely meant for beginners, who are starting with React Redux. This tutorial demands the basics of ReactJS, though I will explain each and every step. If you want to learn the basics of ReactJS check out my article on A simple introduction to ReactJS.

let’s get started.

What is Redux:

Simply put Redux is a store that stores data in the browser (In the case of React). These are the following features of Redux.

• Redux is centralized, meaning all components can interact with it.
• Redux stores every version of the data you put ( later on this is in detail ).

Concepts of redux:

Redux has three main concepts Actions, Reducers, and Store.

Actions: action is something you do ( Store a value, get a value, delete a value ) similar to CURD in database operations(find, update, delete).

Reducers: these are functions that define an action. 

Example: say you choose to put a value 30 in the store, a reducer defines where to put the value 30 and whether it needs to do any operations on the value before storing and all.

But why the name “Reducers”, I seriously have no idea. If anyone knows please comment. Store: Yes you guess it right, it has all the value that is stored.

Working:

Redux works in the following way:

• You make an action, say store a value 30.
• The appropriate reducer( function ) is called.
• The value is stored.

You might think this is simple, wait until you the code.

Before that, I said earlier that redux stores all the versions of your data, this property of redux is called immutability ( Meaning you cannot change a value but only update it ).

Example: 

var arr  = [ ];

arr.push(2) // See you are updating arr not changing it.

arr = [2]// You cannot do this is redux because you are changing the value.

This way your store will have all the values you have used.

Code:

Before diving into the coding you should have the following libraries, just copy and paste it 

npm i redux react-redux react-router-dom

My folder structure looks like this.

I have created new folder reducers, and actions even though we use only one file for both of them, mainly to maintain standards.

So below images shows the basic setup of two pages with react-router in App.js.

Page 1:

Page 2:

Page 3:

Now we will explore actions and reducer files.

Action (action.js):

Thats’ it, this is simply a function returning an object with type ‘ADD’ and payload ( this is your data ). Remember I said action is something that you do, well this action puts something in the store as the type suggests.

Reducer (reducer.js):

Ok, now we see something is going on here. First, storeFunction is a reducer that takes two arguments. A reducer will take two arguments first is the state and the next is the action object ( type, payload  ).

• initiate is for initializing the store ( as this is a simple program we initialized with an empty array, this changes based on the complexity of the program ).
• action_object is checked for undefined because when we start the application the reducer should return something, but it should not return undefined.
• Next, we have our object doing based on the type that you give.
• As we discussed earlier state cannot be changed but it can be updated, so when we add our new payload we also include previous values of the state( so the state has all the values ).

Thats’ it with reducer we move on to connecting the pages with the state.

Connecting action, and reducer with our components.

Page 1:

If you have no idea what is useState please see react hooks, personally speaking, it is the best thing that ever happened to react.

Now we will breakdown what going on in page1

• We initialize the local variable text_data for storing input value and text_data_fun ( used to change the value of text_data).
• useSelector(state=>state) simple takes values from store and maps to local state variable.
• useDispatch() returns a function called dispatch through which we are going to communicate to the reducer.
• useHistory() for navigating between components.

The value typed in the textbox is stored in text_data, and the button calls the function dispatch with the params setData from the action page ( If we recall setData in the action page has one argument that is passed as the payload to the reducer function ).

That’s it we have successfully put values in the store.

You may ask, we did not even call the reducer function, in our case “store function”, how could we possibly have stored the value?.  Correct.

The dispatch() automatically calls the function that has the type ‘PUT’ and will execute the appropriate code associated with it. How does the dispatch() know?. We have to connect the application to the store ( usually in App.js ), which we will see in the next section.

App.js:

Yup this is App.js.

In addition to the existing code, we have imported Provider,createStore from redux and react-redux respectively.

• The createStore function has a reducer as a parameter ( In our case we pass the storeFunction ).
• The Provider component is wrapped around the whole router structure, meaning the components within Provider will access the state.
• The store object is passed as props to the Provider component. This connects the store with the rest of the components.

Page 2:

This page simply shows the whole store when you redirect to page2 from page1.

That’s all. Simple right?. I know it may take one or two more looks to understand the concept, but when you get it, it’s really not that complicated. I have attached the output and shared the git link below. Happy coding.

Output:

Git repo: https://github.com/kishork2120/reduxtutorial.

Happy coding!!!