Hello readers,
I am here to share my knowledge on one of the useful JavaScript library that manages your state in the application. If you are already familiar with Angular or React (basic knowledge is also enough) then you can make use of this awesome library which gives great developer experience and produce great UI.
Still you can use the Redux without using Angular or React. But its works well with ReactJS. So, I will give you detailed introduction about Redux in this article and in my upcoming article we will see how we can use this with ReactJS. Ok let’s get into the actual topic. This topic is going to be theoretical, please bear with me 😉
In simple, Redux is managing your state in the application. We heard the term “Managing States” many times, what it actually means. Let me explain with the diagram and then I will explain each key word in Redux.
The below flow diagram (strictly unidirectional) gives outlined view of Redux (state) lifecycle. It greatly helps in separating Data and Presentation of your application.
STORE: ONLY ONE STORE per application no matter how big the application is. Store contains states and data. State can be anything, as I said before it can be a string, array, object (mostly it could be an object).
PROVIDER: As the name implies, it Provides Store to all the Components like a distributer.
COMPONENTS: It renders UI (what you see on the screen). Once it gets Store (states and data) from the Provider it re-renders the page based on the state change. (Note: application States will become Component props) . Store and the react Component communicate through connect (‘redux’ package) and bindActionCreators(‘react-redux’ package)
USERS: This block is actually not having any technical meaning. It is all about initializing an event (button press, mouse click, mouse hover, network call, timer job – it can be any event which interrupts your application).
ACTION: It is a plain JavaScript object with type property and other properties are completely up to the user, we can define any kind of properties. It is the only source of information for the Store (Note: Each Action must have property called type (good practice to have type value as string))
REDUCER: It is nothing but a simple function with two arguments (state and action) and return new state. This function decides what will be the next state according to the action.
Well, it’s very important to remember above key words in Redux. Especially Store, Action(s), Reducer(s). Here, I just provided basic theoretical definition. In my upcoming article we will see more into this and have technical definition and syntax for these key words.
Happy Coding
Ahamed
Leave a comment