Understanding Redux: A tutorial with examples LogRocket Blog

Note that we use the reducer function as an argument for the createStore function to define a new Redux store for our application. First, we define the initial state for the application by setting the count equal to zero. Next, we define a counterReducer function that accepts the current state and the dispatched action. As we can dispatch multiple actions to the reducer, we’ll use a switch statement to handle the different actions.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger. React Hooks provide an alternative to writing class-based components by allowing us to easily handle state management from functional components. To some extent, Redux works well for state management in React applications and has a few advantages. However, its verbosity makes it difficult to learn, and the extra code needed to get it working can introduce unnecessary complexity. This results in a fairly effective solution for state management in React applications.

What are React Hooks?

If you’re building a house, you probably don’t need a jackhammer even if you’ve learned how to use it. Consider an application with two functionalities “Users” and “Products”. Global strong textcomponents that can be accessed from anywhere. The most prominent benefit is improved state management for your application. First, let’s create an index.html document with the following HTML setup. This will render the current counter value and buttons to increase or decrease the counter.

In comparison, React Hooks such as useContext and useReducer, combined with the Context API, offer a simpler and more lightweight approach to state management. They are particularly suitable for smaller applications or cases where the complexity of Redux might not be necessary. Functional programming involves writing simpler, smaller and isolated functions. By following this pattern, code maintenance, testing and debugging is made easier. Since the functions are small and isolated, that makes them reusable thus they can be copied and pasted anywhere they are needed.

Comparing Redux & Context API

It’s a great tool, and there are some great reasons to use it, but there are also reasons you might not want to use it. Make informed decisions about your tools, and understand the tradeoffs involved in each decision. In fact, benchmarks have shown that more connected components generally leads to better performance than fewer connected components. Overall, React-Redux encourages good React architecture, and implements complex performance optimizations for you. It is also kept up-to-date with the latest API changes from Redux and React.

Some UI libraries (like React) have their own state management system. If you are using one of these libraries, especially if you are just learning to use them, we encourage you to learn the capabilities of that built-in system first. If your application becomes so complex that you are confused about where state is stored or how state changes, then it is a good time to learn Redux. That said, they both allow you to pass data without having to pass the props through multiple layers of components.

Redux middleware

These restrictions are reflected in the three principles of Redux. 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 what is redux 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.

• This also eliminates the need to write more code, which is awesome in my opinion.
• Managing state when building complex tasks was quite a pain in the neck until Redux came along.
• For non-connected components, you may want to check what props are being passed in.
• Since Redux doesn’t allow your application to make changes to the state and uses dispatch() to do that instead.

This allows you to debug your applications effectively, including using powerful techniques like “time-travel debugging”. Once you understand how everything fits together, we’ll look at using Redux Toolkit to simplify things. Redux Toolkit is the recommended way to build production apps with Redux, and is built on all of the concepts that we will look at throughout this tutorial. Once you understand the core concepts covered here, you’ll understand how to use Redux Toolkit more efficiently.

Get set up with LogRocket’s modern React error tracking in minutes:

We usually write that type string like “domain/eventName”, where the first part is the feature or category that this action belongs to, and the second part is the specific thing that happened. You can think of an action as an event that describes something that happened in the application. We’ll look at where and how this is important a bit later, as well as some easier ways to write immutable update logic. It’s the same object or array reference in memory, but now the contents inside the object have changed.

Initially, the problem with legacy context was that updates to values that were passed down with context could be “blocked” if a component skipped rendering through the shouldComponentUpdate lifecycle method. Since many components relied on shouldComponentUpdate for performance optimizations, the legacy context was useless for passing down plain data. As shown in the image, Redux takes away the responsibility from individual components to manage a state. Instead, we create a single store that handles our state management. On top of that, all communication regarding reading, updating, or creating data happens via the store.

The new version of Context API is a dependency injection mechanism that allows passing data through the component tree without having to pass props down manually at every level. On top of that, Redux prevents race conditions where two components simultaneously try to update the state. It accomplishes this task by defining actions that get dispatched to reducers. So reducers are basically pure JS functions which take in the previous state and an action and return the newly updated state. These actions are then consumed by something known as reducers, whose sole job is to accept two things (the action and the current state of the application) and return a new updated instance of the state.

It also provides us with some important APIs using which we can make changes to the existing state as well as fetch the current state of the application. Similarly, removing an item from the cart should decrease the number of items in the cart internally. It should remove the item from the cart object and also display the updated total number of items in the cart in the UI. Well, an application has its state, which can be a combination of the states of its internal components. While it is possible to write this logic by hand, doing so would become very repetitive. In this guide, we discussed the major features of Redux and how Redux can be beneficial to your app.

Why should I use React-Redux?​

Without Redux, you would need some other event system or have to instantiate the snackbar component every time it gets used. If the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions. The state is also immutable, which makes it possible to implement difficult tasks like infinite undo and redo. It is also possible to implement time travel — that is, the ability to move back and forth among the previous states and view the results in real time. I think Redux plays a big role when you need to develop a complex application, that requires to integrate features that have a lot of states or in our case actions. What I understand is both are two different ways of using the context and reducer features that React provides, we can choose which one to use.