What & Why Redux ?

 Introduction

Redux is  a javascript library which can be used with any framework React , Angular etc. it is used to store some data globally which is used to share state across multiple components.

Now , you might be confusing that in react we shared state in component with useState and many more hooks . So why using redux at first place ?

Separation of states

Separation of state are generally on the basis of  what state is used between the components and where they are shared across the whole react app.
We will look at what separation of state in redux and see how this came to rescue and why we generally use it instead of hooks provided by react.

1)  Local State

The state which is used when taking input of the used for the form field . The local state is limited to the single component and useState hook is generally used to maintain local state as they are not complex to maintain

2) Cross - Component State

The state which is used in multiple components for example - when you want to make a modal , so it can share multiple components that closing , opening and many more functionalities that modal can have . The state is shared across multiple components are called cross-component state .We generally do prop drilling or prop chaining for this approach or use react context hook


3) App wide State

The state which is used in all components are generally define as app- wide state . For example - the state which is used for letting know if the user is authenticated or not and affects multiple components by showing header according to the authentication etc.
We generally do prop drilling or prop chaining for this approach or use react context hook

Redux generally used in Cross - Component state and App-wide state . But you might be wondering why we need specifically redux when we can use react context hook.  This question might be revolving in your head , isn't it?

Redux  Vs  React Context

React Context does share state across multiple components but it does has some potential disadvantages which is not a complete replacement for flux like state propagation which is redux

1) Complex State Management

With using React context in large application or enterprise applications , you can end up in multiple providers and it can become complex to maintain where you have so much large file which cause endless debugging and  hard to maintain . Look over the below image and you can understand the complexity of using the react context for the complex state management.

Well we can use where the project is small and easy to maintain where the react context is used for the shared state between components.


2) Performance

React context gives performance when you have an application , it may not update or change the state with high frequency and does not reflect the state . Briefly when you have state that changes frequently in your application , it does not reflect the change in your application with that frequency of update.

Conclusion

Redux help you write code that behaves consistently in your application and it doesn't limited to only react . You can use it anywhere you wanted and also have large ecosystem which will help redux to use easily in you project . Redux help us to centralized our state and make it use widely in all components .

So ,this is redux and the reason why we should redux and where we should redux.

Thank you 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