This is the second post in Redux Series and this will be all about the core concepts of Redux. As mentioned in the last post that Redux is not just for JS UI frameworks like React, Angular, Vue and Svelte but it can also be used in projects built with vanila JS.
So Following are some of the core concepts that Redux follows. Note that these are just simple explanations of these concepts so anyone reading must do research on thier side too but whatever I explain here will be enough for you to start with redux.
Store
Redux stores all the properties of the app we use it in inside a single JavaScript Object. That means that all the data whether it is about authentication or about some other data all of it is stored inside a single object. It is the single source of truth for the state of the application and is accessible by all parts of the application.
This can be helpful because if one piece of data is used on more than one place and if the user or some action changes the data from one place the data on all other places synchronizes with each other because of having only single store for keeping this data.
Functional Programming
Redux is built with Functional Programming Principles in mind. Functional Programming is a programming paradigm where "programs are constructed by applying and composing functions". In Functional Programming, functions are treated as first-class citizens meaning that they have names, can be passed as an argument and can return another function.
There are two types of functions in functional programming:
- Pure Functions. - Functions which will return the same result when provided with the same arguments eg. Hashig Functions.
- Impure Functions. - Functions that don't return the same result when provided with the same argument.
Immutability And Reducers
Since Redux is built on top of Functional Programming Principles, the store object is immutable. That means that we cannot update the store or state of the app directly. For that we have to use a function that takes the current store object as an argument and returns the updated store object. This function used to update the state is called a Reducer.
A reducer function takes two arguments, store and action. Action tells the reducer what value in the store to update. But each and every part of the store will have its own reducer that will update its values. For example there will be a reducer for updating authentication data and a reducer for updating user data etc.
Actions
As mentioned above actions tell the reducer what value in the store to update. An example of an action is below.
const addAction = {
type: "ADD",
payload: "Add Two Numbers",
};
An action is simply a JS object with a type field and a payload telling the reducer what to change.
So these are some of the building blocks of a Redux Application. We have a store to store all the data, reducer functions to update the data and actions which tell the reducer function what data to update.
zainsci