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).
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.