Why we need redux in react

Question

I was done one small web application using ReactJS. It's easy to maintain and understandable. Now I learned Redux and plan to implement on it. Its need some more stuff and extra things to do (To create store, Reducers etc.). I personally thought without redux the react is fine and easy to understand and maintain the states. Then why we need extra stuff (Redux)?

Answer 1

Reasons to use Redux:

Same piece of application state needs to be mapped to multiple container components.

A good example of this is session state. When the app first loads, often information about the user needs to be shared with various components in the titlebar and each page. It’s likely these components don’t have any direct relationship so Redux provides a convenient way to share state.

Global strong textcomponents that can be accessed from anywhere.

It’s common to have components that live for the life of the application (for a single-page app this is every time the entry point is reloaded) that do things like show notifications, snackbars, tooltips, modals, interactive tutorials, etc. With Redux, you can create actions that dispatch commands to these components so, for example, if the code makes a asynchronous request to the backend it can dispatch a show snackbar action if the request fails. Without Redux, you would need some other event system or have to instantiate the snackbar component every time it gets used.

Too many props are being passed through multiple hierarchies of components.

If a higher-level component is provided with a dozen props and uses only two of them, and the rest are passed down to a lower-level component, then consider refactoring with Redux. This scenario happens a lot with wrapper components that just provide layout styles, but don’t require a lot of data or configuration. It’s more practical to side-chain Redux directly into a lower-level component in this case.

State management using setState is bloating the component.

This is pretty subjective, but components that are over several hundred lines of code start to become harder to reason and maintain. Separating out the state management into a reducer breaks up the code and makes it more readable.

Caching page state.

When the user does some stuff to a page, then goes to another page and comes back, the expectation usually is to have the page in the same state. Some of this can be addressed by saving the page state in the backend and recalling it on page load. But, often things like search input values and expanded/collapsed accordions are just overkill to store in the backend. Since reducers typically initialize and live throughout the session, they can cache the page state so things remain the same.

Answer 2

Managing the state can be complex. Although react provides us with the state property but passing the state from component A to component B can be quite complex when the application grows. Here is a simple example which shows why do we need redux.

Consider an application with two functionalities "Users" and "Products".

Users have authentication implemented where they can sign-up and sign-in and the users can view the dashboard only when they are authenticated. The other functionality "Products" also require user authentication information because the "Cart" operations will be accessible when the user is authenticated/signed-in. To get user authentication information at this part will require alot of state/props passing from "Users" component to a different section of the application "Products". This is when Redux comes in picture, it provides a central store (stores entire application state) which is then available to the entire application.