How Redux Works ?

 Introduction

We know what is redux and as we know it is an alternative to react context hook . Redux is an replacement for react context and cover many potential disadvantages when using cross component and app wide state across multiple components . Let's explore core redux concepts and how we use redux in our react applications with the flow diagrams . So it better understand to you and the concept easily get into your projects.

Redux  , stores the state in the centralized location where it can be used globally over the web across multiple components.  So we should first be discussing about that peace of content. 

 1) Central data store generally keep all the state or updates of state which later notifies the component which state has changed . Central Data Store is the location where all the mutation or updates of state kept which later be used in the component.

2) After setup the central data store for managing the state , how the store notify the component if some state has changed ? . To access state from the store ,  component need to subscribe the state and by subscribing to the store , component can have access to the state of the store and store will notify to the component if some state has changed.

But component generally mutates the state , example on button click etc. Here the component cannot directly mutate the state and can only read the state but cannot write directly . It is unidirectional and so how we update the state in the store , if we cannot change through the component directly?

Well, the general concept that we have also learned in useReducer hook , where we have reducer function which has some initial values and functions on the basis of which the state updates. Likely , in redux we can update the state with the reducer function from which the store can mutates its state . Don't confuse these reducer function with some reducer in javascript where we reduce to some value , these are the general function we use to modify the store conditionally.

You might be wondered , generally they are the components who changes the state with some user input . In redux , components triggers or dispatch some actions which notify the reducer function at what action the state should update , on the basis of description of action the state updates .

Therefore, component dispatches the actions which are triggered then forwarded to the reducer function and the state updates in the Central Data Store which then notifies the component about the state change and it reflects on the screen.

This is the lifecycle in redux and this how redux works under the hood .

Thank you for reading :)