Redux

**

What is Redux?

**

Redux is a predictable state container that allows you to create JavaScript apps that act reliably across client, server, and native contexts and are simple to test.

While it's most commonly used with React as a state management tool, it may be used with any other JavaScript framework or library. It's only 2KB in size (including dependencies), so you don't have to worry about it increasing the asset size of your application.

The state of your application is stored in a store with Redux, and any component can access any state that it requires from this store.

When is Redux used?

Recently, one of the most heated disputes in the frontend community has centered around Redux. Not long after its publication, Redux became one of the most hotly debated subjects. Many people favored it, but others highlighted major flaws.

Redux enables you to manage your app's state in a single location, making updates more predictable and traceable. It makes it simpler to reason about changes in your app. However, all of these advantages come with tradeoffs and limits. It may appear that it adds boilerplate code, making simple operations more difficult; nevertheless, this is dependent on the design selections.

How Redux works

Redux's operation is straightforward. There is a central store that holds the application's full state. Each component can access the saved state without needing to send props from one component to another.

There are three construction blocks: actions, stores, and reducers. Let's go over what each of them performs in more detail. This is crucial since it helps you grasp the benefits of Redux and how to apply it. We'll construct a similar example to the login component previously, but this time in Redux.