Redux basics in less than five minutes
Heelllooo there. Now if you were anything like me, you probably found learning Redux quite a cumbersome task. The purpose of this article is to simplify the concepts and bring you to a high level understanding of Redux and how it works.
Redux in a nutshell is a state management library. One of the core parts of Redux is what is called the
store which you could think of as a cloud that sits on top of your application and holds the current state of your app at a given point in time.
So, a few things you need to know about the store :
- It is the single source of truth, meaning all your UI elements fetch state and any updates to application state from the store and only from the store
- The store is not directly mutated because the store in its nature is an immutable object.
So how then do we actually update the state? I am glad you asked. Because the store is an immutable object, we write a function called a reducer, that takes the store as an argument and returns an updated store with the updated state.
Another core piece of Redux is what is called the
reducer. All the reducer really is, is a function that takes the current instance of the store and returns an updated store. The reducer does not touch global state at all, mutate any arguments or have any side effects.
The last major piece in this puzzle is called the
How does it all work under the hood?
- Whenever an action is performed by the user, an action object is created and dispatched. This is done through the dispatch method which takes in an action as an argument
- The store will forward the action to the reducer (Note that the store is in charge of calling the reducer)
- The reducer will then receive the action, compute a new state based on the action type and will then return the new state to the store
- The store will then set the state internally and notify all the UI components about the update
- The UI components will then pull the updated state from the store and refresh themselves accordingly.
This is a VERY, VERY high-level explanation of Redux. Under the hood, it is a bit more complex but it is important to understand the basics because it will inform your understanding of the deeper operations and complexities of the library. I hope this helped! Please share if you think this might help someone else!
Till next time 😃
Quite informative and a refresher for people using Redux. However, it might be hard to understand for someone just starting. What is a "dispatch" method?
Including some code snippet or a digram might help.
Other than very lovely to read.