Explore Core Redux Concepts

Redux is the library which can be used with any javascript framework and not just with react .Indeed redux team , now  recommends usage of extra package called reduxjs toolkit and will cover this later in the blog post. These core concepts will  make the baseline for the redux learning.

Let's explore core redux concepts and clear the basics from the starting. 

This is the folder structure that will look like in the simple project. Will will first run the command npm init -y to install the package json file and then install redux with command npm install redux which will automatically install package-lock. Json file and node_modules later , also create the server.js file in the project . 

Then , we will import redux and create the store with the help of the function createStore()  . It will give the deprecation warning which you should ignore it first because redux team recommends using reduxjs toolkit . 

The store is created to store the state at central data store and give it to the components when some changes occurred to the subscribed components.

The store receive the parameter of the reducer function that mutates the state . In the reducer function we have the access to the state and action , on the basis of action specified in the conditional statements , the state overwrites and return from the reducer function (general function) . In this example we have two action types which is increment and decrement , on the basis of which we return the state , else return the unchanged state.

After creating the reducer function , we should subscribe the components which received the state that has changed. So, we have the subscribe function , that will take the function who will have the access to the state . The getState() function will return the changed state and console log it.

This is how with the dispatch action we will triggered the increment and decrement action and can mutate the state , and the subscribes component will get notify as the dispatch function call.

The result log in the console , the counter increment and decrements whenever we dispatch the function. Run the command node server.js which is the root file of the project.

The final look of the project shown below .

Going through the core concepts of the redux makes the advance concepts easier to understand . Play with the code and make your hands dirty with one by one step.

Thank you for reading :)