Good afternoon! Or maybe it's good morning? Yeah I'm not entirely sure what time you're reading this, nevertheless, I hope you are doing well and being safe. If you did decide to click this link, I'm assuming that you are looking to get a better understanding of what Redux is all about. Well, my friend, you have come to the right spot. After reading this blog I hope you leave will at the very least a baseline understanding as to what Redux is all about. Let's not waste any more time and jump right into it shall we?
So, first things first, what the heck is a Redux? Great question. Redux is an open-source JavaScript library for managing application state. One great thing about Redux is the fact that is framework agnostic. That simply means that it does not matter what front-end frame work you choose to work with, Redux does not discriminate and will work with a plethora of different ones. Frameworks like React, Angular, Vue, Backbone, and Ember just to name a few.
Coming straight from Redux's documentation, Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. The whole purpose of Redux is to take the onus off of each component in an application to internally manage their state own state and in return have state shared by all components from one centralized location. Having each component manage state isn't necessarily a bad thing at all, it can just get difficult the bigger your application grows to keep track and manage application state in each individual component. In comes Redux.
The logic behind how Redux works can be broken up into three main concepts which are the store, actions, and reducers. First up let's talk about the store.
When referring to the store, you can think of it as a single immutable JavaScript object that includes the state of the entire application. There should only ever be a single store in an application, and that one store will be the place every component goes to to either update the current state or simply get data from the current state. One important thing to note is that the store object is never mutated directly. Instead in order to update the current state you use a function called a reducer that takes in the current state and an action as parameters. Which leads us to our next core concept, which are actions.
Actions are the only way to change the current state by informing the store that an event just took place (A user clicked a button, a form was submitted, an HTTP request has resolved). An action is simply an object that has two properties, type and payload. The type property indicates how the state should change and it's always required by Redux. The payload property instead describes what should change, and might be omitted if you don't have new data to save in the store. Great! We now know the store is where the state of the application is stored, and actions are how we alert the store to update and modify that state, the last step is to respond to that action using a reducer.
Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, they do not describe how the application state changes. You can think of reducers as being a type of event handler, where actions are the actual event.
Reducers are just functions that take in two parameters, which are the current state and an action. Reducers are extremely important because if you remember from earlier, the store object is immutable and cannot be modified directly. Reducers remedy this by simply being a pure function. Pure functions are functions that always return the same result if the same arguments are passed in and do not cause side effects. It does not depend on any state, or data, change during a program’s execution. It must only depend on its input arguments. This is perfect when using reducers because we can update the state of our application based on an action without having to directly mutate the store object directly. We can make a copy of the current state, mutate the copy, then return that object to represent the new current state of our application.
So to conclude, I hope after reading this blog you got a better understanding of what Redux is and why it can be useful in your next project. It may not always be as useful in smaller projects, however if you ever get involved in a bigger project, Redux may be the saving grace. Also many jobs require that you know Redux in order to be considered to be hired. For whatever reason you may have, if you do not want your app to combust I would suggest using Redux. Until next time!
Top comments (0)