![]() It should be considered and maintained as a single source of truth for the state of the application. The Redux store is the main, central bucket which stores all the states of an application. The global state of an application is stored in an object tree within a single store – Redux docs In the following section, we will dive deep into the core concepts of Redux – the store, actions and reducers. This is how Redux makes state management predictable. Given an initial state, with a specific list of actions in a specific order, it'll always provide us with the exact same final state of the entity. And firing the action of adding one item to the cart again will increase the number of items in the cart to 2. So continuing with our above example of an e-commerce website, if the initial state of the cart is that it has 0 items, then an action of adding one item to the cart will increase the number of items in the cart by 1. With the same actions in the same order, you're going to end up in the same state." "Actions can be recorded and replayed later, so this makes state management predictable. Rather a reducer produces a new instance of the state with all the necessary updates.Īccording to Dan Abramov (the creator of Redux) himself, Note that reducers do not change any part of the state. We'll talk more about actions and reducers in the following sections. 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. What makes Redux predictable is that to make a change in the state of the application, we need to dispatch an action which describes what changes we want to make in 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. Being a state management library, Redux will basically store and manage all the application's states. This is where Redux comes into the picture. This task of handling multiple states from multiple components efficiently can become challenging when the application grows in size. This is not just only to show them in the view, but also to manage or update them or perform some logic based on their value. We may very well maintain the internal state of the components inside them, but as and when an application grows bigger, it may have to share some state between components. It should remove the item from the cart object and also display the updated total number of items in the cart in the UI. ![]() Similarly, removing an item from the cart should decrease the number of items in the cart internally. ![]() It has to maintain its state internally and also show the user the total number of items in the cart in the UI. Whenever a user adds an item to the cart, the application has to internally handle that action by adding that item to the cart object. At all times the application is up and running, this component has to show the updated number of items in the user's cart. The state of the cart component will consist of all the items the user has added to the cart and the total number of those items. We'll take the cart component which displays the number of items in a user's cart. An e-commerce website will have several components like the cart component, user profile component, previously viewed section component, and so on. Let's take an e-commerce website for example. Well, an application has its state, which can be a combination of the states of its internal components. We will also see how some of its core building blocks work, such as store, actions, and reducers and how they all come together and make Redux the global state management library that it is.Īs a prerequisite, I will be assuming that you're familiar with React. We will learn what Redux is at its core along with its three key principles. In this article, we'll be covering the fundamentals of Redux. If we dig deeper into this statement, we see that Redux is a state management library that you can use with any JS library or framework like React, Angular, or Vue. Redux is a predictable state container for JavaScript apps.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |