Redux is a JavaScript library for managing application state. It’s become popular in the React community but can also be used with any other library or framework. The store is beneficial for creating predictable state changes in your applications. To master Redux, you must understand the core concepts: actions, reducers, and stores.
As we cover the fundamentals of Redux, there are many different ways to use it. Nevertheless, today’s goal is to understand the core concepts so you can figure out the rest.
In brief, the purpose of Redux is to manage the application state. Let’s dig deeper to see what lies under this statement!
What is Redux?
As a predictable state container, Redux helps developers write consistently behaving applications. This is done by managing the state in a single store. All the state for an application is held in a single object. Any changes to that state include pure functions called reducers.
Redux assists in writing applications that can efficiently run in various environments. For example, independent client servers on a Node.js server or even inside React Native have their specific use cases.
Developers use Redux with any JavaScript library or framework, but it’s most commonly used with React. This means the store can hold the application state and send updates to React components.
It’s like a bank. The store is where you deposit your money (state), and the components are like people who have accounts at the bank (subscribers). The bank (store) doesn’t care who the account holders (subscribers) are, only that they can deposit and withdraw money (state).
Mastering The Core Concepts
- Stores
- Actions (with Action Creators)
- Reducers
The core concepts denote the different parts of Redux and how they work together.
Stores
A store defines an object holding the current state of the application and provides methods to access and update the state. The store is not a class. It’s more of an object with some helper methods.
The store might contain the items in the shopping cart for a shopping application: the user’s shipping information, the current total price, etc.
The store is the only place where the state can be updated. All other parts of the application must use methods provided by the store to read the state and dispatch actions.
The state is immutable, meaning that it can’t be changed directly. The only way to change the state is to dispatch an action.
Actions
An action is a plain JavaScript object that intends to change the state. The action must have a type property that specifies the type of action that is being performed. For example, actions to add or delete items to a shopping list would have a type property of
- ADD_ITEM
- DELETE_ITEM
Actions are dispatched to the store with the store’s dispatch method. It takes an action object as an argument, and once the action has been processed, the store will call any registered listeners (i.e., subscribers).
Reducers
A reducer is a pure function taking the previous state and an action as arguments and returning a new state. The reducer is responsible for setting the next application stage by handling the dispatched action.
Reducers are written to handle specific action types. For example, a reducer that handles the
“ADD_ITEM” or “DELETE_ITEM” actions would take the current state and the action object as arguments. It would then create a new state object with the item added to the list or delete it from the list.
The store will call any registered reducers when an action has been dispatched, and the new state returned will be passed to registered listeners (i.e., subscribers).
The reducer must always return a new state object; it can never modify it directly. This makes Redux predictable: given the same inputs (state and action), a reducer will always return the same output (new state).
There are many ways to structure a Redux application, but the most common pattern has a single store with multiple reducers. Each reducer is responsible for handling a specific part of the state.
For example, in a shopping list application, there could be two reducers: one for the items on the list and one for the currently selected item. When an
“ADD_ITEM” or “DELETE_ITEM” action is dispatched, only the reducer responsible for handling the items would be called. The selected item reducer would remain unchanged.
This separation of concerns makes Redux applications easy to reason about and maintain.
Putting It All Together
Redux has become increasingly popular over recent years due to its maintainability, testability, and predictability. In a nutshell, Redux enforces the unidirectional data flow, which helps to make applications simple, predictable, and easy to understand.
If you’re interested in exploring more, we suggest taking a free Redux course by WildLearner! With a straightforward approach, you’ll be building Redux applications in no time. The only prerequisite for the programming course has solid knowledge of React. It will take you over 10 hours to master the skill of Redux programming. Investing so little to get so much in return is a jackpot!
Three Pain Principles of Redux
As a developer working with this store, you must know three main principles of Redux. We will now skim each to help you grasp what they mean.
Single Source of Truth
“The state of your whole application is stored in an object tree within a single store.”
Why? The main reason is predictability. If everything related to the state of your application is in one place, it becomes easier to understand how things work. Moreover, more states mean it will be harder to debug your application.
State is Read-Only
“The only way to change the state is to emit an action, an object describing what happened.”
It means that you can’t call “store.dispatch()” from inside a reducer. If you do, an infinite loop will occur. A reducer dispatches an action, the latter triggers a reducer, which again transmits an action, and so forth.
Changes are Made with Pure Functions
“Write pure reducers to specify how actions transform the state tree.”
What does it mean? First, the reducer must be a pure function with two arguments: the previous state and the dispatched action. Secondly, given the same arguments, it must always return the same output.
Redux is a community-backed open-source project. You can use it with any programming language and on any platform. Plus, the community is always ready to support any of your inquiries. Thus, there’s a so-called “safety net” for every beginner.
The Bottom Line
Summing up today’s research, let’s answer the question: “What is redux used for?”
Redux is an excellent tool for managing state in JavaScript applications. The store helps keep your application state predictable by allowing you to dispatch actions that modify the state tree. The reducer function ensures that the state is updated correctly, and the subscribe function allows you to register callbacks that are executed whenever the state is updated.
If you haven’t started using Redux yet, we recommend that you do! It will make your life as a developer much easier.
And if you’re just getting started, be sure to check out our free course database.
