The beauty of this flow is that, given a UI state and any Action, the next state of the UI can be determined without ambiguity. Redux gives you methods to handle data flow but relies on you, the developer, to implement it in such a way that honors the flow above. The key takeaway here is that data flows in one direction starting with a user interaction and ultimately defines the next state of the UI. Once the Store is updated with the new state, all the connected components that are listening for those changes are fed the new state to handle it as they wish. The individual Actions are handled by one or many Reducers whose job is to update the Store in a very specialized way which we'll get to later on. In Redux, data flows unidirectionally and there is one and only one way you should update and receive data from the Store.Ĭonceptually, components or other parts of your UI dispatch Actions when a user interacts with the application or an event needs to be handled. These components are known as "connected components" in order to distinguish them from those that are not aware of the Store remember, not every component will care about the app's global state and there are various methods used to ensure that only a minimal set of them are connected to make it easier to reason about your application's logic. In the context of a React application, for example, we can think of components as subscribers of the Store. When those things change, the subscribers will immediately be made aware of the changes. In this paradigm, subscribers listen to topics or areas of interest which, in this case, can be slices of your app's global state. Redux works by using the Publish/Subscribe pattern. Redux allows you to have different parts of your application subscribe to this global state and listen for changes. In Redux, this state container is "predictable" because there is only one state container for the entire application and there is only one way to update it, which we'll soon go into. For instance, data such as whether the user is logged in, how many items they have in their cart, or which route they're in can reasonably live in the Store since there would most likely be many parts of your app that need to access that information. That object, known in Redux as the Store, holds the app-wide state of your application. Redux is a predictable state container for JavaScript apps.Īt the heart of Redux is a single JavaScript object that we all know. Note: if you already know how Redux works, you can skip to the Let's Begin section. In this post we'll be exploring how Redux works at its core and then building it from the ground up to power a simple music player application. Over time I've grown to approach other complex libraries like this and encourage others to really understand how a library works, not just how to use it - their concepts are often worth more than the library itself. I quickly found that this feeling of magic was really a false sense of security because I couldn't understand what was happening under the hood.Īpart from reading the official Redux documentation, what made everything click for me was trying to work out what was going on behind the scenes. Over time, as with any sufficiently complex app, I was forced to dig deeper into my state management layer to refine it for more advanced scenarios. After some setup, previously disconnected parts of my app were now perfectly in sync, sharing state, and updating one another. I'll never forget the feeling I had when first exploring Redux.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |