Redux in React

Introduction

We have discuss core redux basics , now it's the time to explore redux in react at the basic level . Let's look at the redux step by step deeply in the sample project of react.
In this project , we will have the increment , decrement and show toggle actions which will manipulate the counter state and display the state accordingly.

First step , would be to create the store with the reducer function of the redux which will handle the change in the component and maintain the state across the react application.

In this example ,  we will declare the initial Values and set the counter = 0 and show = true whenever some action is dispatched ,  these default values  changes accordingly though the reducer function . If we don't specify the initial values that will bring result and error because the initial values are undefined or not declared as you are changing value which is not even defined, so it will obviously produce an error.


After declaring intialValues , it will pass in reducer function and assign it to state . As , we have discussed in earlier blogs it takes two parameters which is state and action . Through the action , we conditionally changes the state in the reducer function where we must return some value. It is basically a general function which return some value and not the reducer (the concept in javascript which reduces to some value) function of javascript.


Further , we pass the reducer function to the store and export the store to provide into the whole react application.


Second step , to provide the store in the main index.js file which is the root the react application. So , that the state can be used globally across the application . We will provide the store with the help of react-redux package which helps to used redux better in react.


Third and last step , to use the state in the application and dispatches the action in the handler function to change the state accordingly.

A - In the counter component , the useSelector and useDispatch will be imported from the react-redux . The method useSelector is used to get the particular state from the store and useDispatch function is used to dispatch the actions. You can look into the example where the type contains the string that conditionally triggered the actions whenever the user clicks the button.


Now, at the end we will use the state variables to show the counter value and put the handler function in the button element.


So, this is how we will use redux in react application and use the state across globally.
This is the code sandbox link ->Redux in react to help you get started with redux and can practice with the code.

Thanks for reading :)



Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more