Intoduction to Redux

Hey coders! I hope you are doing well and building projects. As promised in the previous article, this is part 1 of our comprehensive guide on React Redux.

In this article, we are going to understand What is redux? Why do we need redux? What are other available state management mechanisms? And what packages does the redux library have to offer?
So let’s dig into it ….

Why do we need to manage the state?

We know React offers certain hooks to locally manage the state in a component. For example, while creating forms we can manage the state of the form with the help of the useState() hook and accordingly perform functions.

But sometimes we need to render UI or perform some actions based on the state which is used or declared in some other component.

In other words, we need to manage a global state such that, every component has access to it and can use or update the state. And that updation of state by one component should immediately reflect in each and every component.

That’s where global state management comes into the picture. We’ll look into state management in detail in the next article.

State Management without Redux

1 useState()
Although this is the best way to manage the state locally. But if some other component tries to access this state, we are helpless.

import {useState} from 'react'

export default function counter(){

//local state management
const [data, setData] = useState("")

return(
<div>
<input type="text" value={data} onChange={(e)=>setData(e.target.value)} />
</div>
)
}

2 ContextAPI
ContextAPI is not a state management library, instead, it
is a mechanism based upon props drilling You can refer to
this article to understand hooks, and here is
the implementation.

As you can see, it takes a certain line of code to prop drill. And it’s a good approach if we have to manage a bunch of components or our codebase is small.

Now, imagine if we have a very huge code base and 100s of components, then we have to repeat this process for every component of each component tree. And this is pretty much hectic and repeated logic which is not desirable

3 useReducer
You can see the useReducer implementation over here. UseReducer hook came into existence after a few years of the introduction of the redux library.

useReducer is inspired by redux and works on the same pattern as redux but the problem remains untouched. useReducer() is more suitable for smaller-scale applications or local component state management. It follows the same pattern as Redux but on a smaller scale.

What is Redux? And how it manages the state?

As per official Redux documentation,

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for the state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

Redux implements state management with the help of One Way Data Flow and Flux Pattern which we will cover in the next article i.e. Part 2 of this series.

What Redux library offers?

Redux in itself offers multiple packages. These are:

1. react-redux package to build react apps. It offers some hooks to read and update the state which we will see in upcoming articles.

2. redux core package. This package consists of all the libraries, features, etc. It is used to write redux logic from scratch.

3. redux toolkit. It is the most recommended way to implement redux logic. write redux logic from scratch consists of repeated boilerplate code. Hence to manage the state more efficiently redux toolkit is recommended.

But in order to build our understanding regarding redux, we must learn to write redux logic from scratch and then we can easily move on to redux toolkit

When and When Not to Use Redux?

So basically we have 3 options available for managing the state:

1 Context API
Use Context API when you have a small to medium-sized application with a few levels of nesting, and you need to share the state between components that are not directly connected in the component tree.

It's useful for managing global or application-level states, such as user authentication, theme preferences, or language settings.

Context API is built into React and doesn't require any additional libraries, making it lightweight and easy to use.

However, it might not be the best choice for complex state management scenarios or applications with a large number of components, as it can lead to prop drilling and performance issues.

2 useReducer
Use the useReducer hook when you have a local state that requires more complex state transitions, such as managing the state of a form, implementing undo/redo functionality, or handling a component with multiple states and actions.

It provides a way to handle state updates through a reducer function, similar to how Redux works but on a smaller scale.
useReducer is part of React's core library and can be used without any additional dependencies.

While it is more powerful than a simple component-level state, it may become harder to manage for larger applications with more complex state interactions.

3 Redux
Use Redux when you have a large application with complex state management needs, including advanced features like time travel debugging, middleware, and a centralized store.
It's suitable for applications with many interconnected components and where the managing state becomes challenging using the Context API or useReducer alone.

Tu sum up, For small to medium-sized projects, Context API and useReducer might be sufficient. For larger and more complex applications, Redux could provide the necessary tools and scalability.

This sums up our first article of the series Mastering Redux. I hope you enjoyed learning about what is redux, why it exists, how it works, and when to use it.

In the next article, we will learn about State Management in detail and see why immutability is an important concept in the working of redux.

If you like my work, please follow me to never miss out on any of my well-crafted articles.
You can also follow me on GitHub and LinkedIn. I will meet you in the next one.

Comments

[Peter Vivo]

Imho redux main selling point is the great redux dev tools and the redux-saga which is give really useful unique async state handling capability for larger project, with JS generator functions - which is very underestimated.

[Piyush Jaiswal]

Yeah exactly. That's why I mentioned the following point in article.

For larger and more complex applications, Redux could provide the necessary tools and scalability.