What is redux.js? why do you use redux.js?

Photo by GitHub — devmdmamun/basic-redux

Redux is a JavaScript library for managing and customizing application state. It is commonly used with such as react.js, angular.js and so on. Similar to Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark. Right now I will say why I use redux.js. There are a lot of regens that use redux If I make a big project that time we need to pass data on a different page if I use numeral react state then date madness is very tape. That’s why we should use redux. But redux brought an updated version like redux-toolkit. That is learning and used very gey. That’s why everyone tries to learn redux. But everything has good side and bad side. similarly, Redux has some pros and cons.

Firstly I would like to say about the pros side:

1. Centralized state management: With Redux, you can maintain the state of your entire application in a single store, making it easier to manage and access data across components.
2. Predictable state updates: Redux has a clear flow of data, which means changes to the state can only happen when you create an action and send it through Redux. This makes it easy to understand how your application’s data will change in response to user actions.
3. Easier debugging: With Redux DevTools, you have a clear record of all the changes to your application’s state. This makes locating and fixing issues in your code easier, saving you time and effort in the debugging process
4. Better performance: By minimizing the number of state updates and reducing the need for prop drilling, Redux helps improve your application’s performance.

Now I would like to say about the cons side of redux:

1. Centralized state: Redux stores all of your application’s state in a single store. This makes it easy to track changes to your state and to ensure that your application is always in a consistent state.
2. Predictable state changes: Redux uses immutable state updates, which means that your state can only be changed in a predictable way. This makes it easier to reason about your application’s state and to debug your code.

3. Flexible: Redux is flexible enough to be used with any UI layer. It also has a large ecosystem of add-ons that can be used to extend its functionality.

Photo by Managing State in React Native With Redux Toolkit — DEV Community

Redux toolkit update version in redux. It also uses very easy for example -

1. Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
2. Provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in.
3. Takes inspiration from libraries like Immer and Autodux to let you write “mutative” immutable update logic, and even create entire “slices” of state automatically.
4. Lets you focus on the core logic your app needs, so you can do more work with less code.

The key components that enable this centralized approach to state management are:

1. Store
2. Actions
3. Dispatch
4. Reducers

How to install Redux

• Redux: The core library enables the redux architecture.
• React Redux: Simplifies connecting your React components to the Redux store.
• Redux Thunk: Allows you to write asynchronous logic in your Redux actions.
• Redux DevTools Extension: Connects your Redux application to Redux DevTools

There are a lot of hooks in the redux toolkit. Like :

useSelector, useDispatch, configureStore createSlice

This official website link: Redux — A predictable state container for JavaScript apps. | Redux

Jhankar Mahbub