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.
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
- Actions (with Action Creators)
The core concepts denote the different parts of Redux and how they work together.
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 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).
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?”
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.