An Overview to REDUX in layman terms

Redux

Redux is a JavaScript library, Open source to manage the application state like FLUX which is also an application state manager, and to Centralize your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.

The main difference between them is that Redux includes only one store for the application to keep everything in one region, however, FLUX could have more than one store for the Application.

In past, to connect two components ig. Cart component and Product component, the only way for this connection is through the Parent component of each.

Redux consists of :

·         Store:

o   The container which holds the application state.

·         State.

o   It is an object which holds the whole application state and can be returned by getState().

·         Action.

o   It is an object, consists of ( type, and payload ), and any intention to change the state will be through the Action type which is preferred to be a String and It could be defined in the same file or as exported constants in another module to be accessible.

·         Reducer.

o   The function ()=>{} that reduces the whole state values to a single value, and it is highly important in the whole redux system.

·         Dispatch.

o   The function()=>{} that executes the action/s received and changes the state depending on the type of the action which is a string.

·        The mentioned elements above will be explained in a simple example to declare the role of each element.

Let us say we Implemented a Web Application for Currency rate updates:

·         Web view:

o   the Web Page will be the ( Web View ) that shows any changes that happened at a specific rate on user demand.

·         State:

o   The whole data of currency rates, and the web page will only show the current rate ( State ) depending on the User's request.

·         Action:

o   User request ( Action.Type )  which could be “Us-Dollars”.

o   And the ( Action.Payload ) could be The Equivilint Value ig. in Indian Rupee or Egyptian Pound.

·         Reducer:

o   The Underhood system of redux ( Reducer ) receives the action, Executes ( Dispatch ) the action, checking the current value/state, if there is no difference, it returns the ( State ), else changes the rate ( State ) depending on the current value of the currency and this currency which user requested and returning the new State and any non-changed data in it.

·         Store:

o   The reducers container subscribes to the data ( State ) to get any changes in currency rates depending on user request, then rendering it on the web page.

And one of the Redux advantages is that the State is accessible from any page ( component ) in the project, ig. If the user went to the articles page, the currency rate will be shown and rendered.

The problem of using redux is that the redux itself is so complicated, and implementing a simple application could be hard, however, the old and ordinary way to connect between components through their parent components could be easy and practical.

And there is also no need to use Redux when you don’t deal with multiple resources of data, and take care because if the application crashes the state will be lost, so you will have to use a caching solution to backup  the state

 So good planning is required for your application and determination of its goal will help you to choose if the redux will be an overhead on this application and a headache for you, or it will be efficient.

Resources: https://redux.js.org/