Skip to main content

Redux - Introduction

Now days single page applications are widely developed and there are different frameworks to develop single page application. Although there are different frameworks, Manage single-page applications have become increasingly complicated, our code must manage more state than ever before.

Redux offers us an in-memory store. You can say it is blueprint of database but in browser's memory.

Concepts in Redux:

There are few concepts which we should know before starting. we will explain each of them in great details in future.

1. Store : Store is nothing but simple javascript object which will store in tree like structure. This is the heart of Redux. This  will be the single source of truth. application will behave according to state of store. State is immutable.
2. Actions : Actions are nothing but javascript object.Which contains type and payload. whenever we want to change the state then we need to dispatch an action. e.g suppose we have employee list in our state and we want add one new employee in that state then we can dispatch one action called AddEmployeeAction

Structure of AddEmployeeAction could be like this:

   {
        type: "AddEmployeeAction",
        payload: {
                         EmpId:101,
                         EmployeeName: "John Tont"
                       }
     }  

This actions are handled by special functions called reducers.

3.Reducers: Reducers are nothing but simple functions which handle actions. In reducers we handle each actions and accordingly we alter the state. Reducers are pure functions since it wont alter the state by updating the previous state but it create new state and return to store.

4.Effects: Effects are nothing but side effects. Some time we cant directly update the state by reducer but we need to first give server call to persist data and then we need to alter that persisted data into store in this case reducer can not handle such actions so effects come into the picture.

When there is need of async call, for such requests we create actions but we handle those actions in effects and after result of async call we dispatch another action (which is handled in reducer) to alter the state.  

This are the core concepts of Redux.

Lets take an Example (Explained in diagram).

Suppose there are 2 task we have to accomplish 
    1. Getting count of employees
    2. Updating one of the employee details

For fist task we just need store since we have employee list in srtore so no need to go to server
For second task we need to update server first and then after success we need to update store



There are 3 principles of redux:

1. Single source of truth
   The state of your whole application is stored in an object tree within a single store.
 Important advantage of 'single source of truth' principle is its very easy to debug and inspect application.

2. State is readonly

This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

3. Changes are made with pure functions

Reducers are just pure functions that take the previous state and an action, and return the next state.


This is just introduction of Redux. We will go in depth in upcoming post. so stay tuned. Happy coding  ☺!!!

Comments

Post a Comment

Popular posts from this blog

Redux - Store

A store holds the whole state tree of your application. What is State? State represents the entire state of a Redux application, which is often a deeply nested object. The only way to change the state is to dispatch an action. Its an object with few methods on it. Store Methods: 1. getState() : This method returns current state tree of application. reducers returns the state since it is pure function. So current state is nothing but the last state return but the reducer function. Return type of getState() is any. 2. dispatch(action) This Method dispatches an action. This is the only way to change the state. The parameter is action. action is nothing but an object which contains property like action type and payload. 3. subscribe(listener)​ This method use to subscribe the store. the parameter for this method is callback function.if there is any change happen to the state by dispatching any action then listener callback function will get cal...
Post a Comment
Read more

Redux - Actions

  Actions are nothing but just javascript object. When we want to change the state of store then there is no option rather than dispatching the actions. Dispatching action is the only way by which we can change the state of store. Action contains two properties: 1.  Type 2.  Payload Type is nothing but simple plain string to identify what kind of action it is e.g "Update_Employee" / "Delete_Employee" Payload is data required for performing the action e.g suppose we have to dispatch "Update_Employee" Action but, to perform this action we need updated employee's data so that we can alter the state of store so in this case updated employee's details will be the payload for this action so basic structure of action will be like below {      type: "Update_Employee", payload : {             employeeId : 101, name : "John Tot", Address : "-----"           } } When we are imple...
Post a Comment
Read more