Skip to main content

Redux - Reducers

In Redux framework there is a store which maintain state of application (store is single source of truth). so the store is use throughout the application.


all components share the store. So its very easy to have communication in between the components regardless of at what level component comes.

As we have seen in previous post whenever we wants to change the state then we need to dispatch action. but updating store is not taken care by dispatching action only. we need to handled that dispatched action and do the update.

As we have to maintain state as mutable we need a function which will be the pure function which will change the state and return new state.

Yes, reducer is that function. We already defined reducer.

"Reducer is pure function which alter the state of store and return the new state"

So how can we write reducers in Angular


Reducer function takes 2 parameters
 1. State  - current state of application
 2. action - action to perform

 According to action it update the state and return new state


 Lets take an example I have a store which containes employee list

export interface State {
employees: any[];
}

export const initialState: State = {
employees: []
};

Lets assume we have an action 'Add_Employee' which adds employee to state


So we will dispatch an action like this (below code appear from where you want to dispatch an action and for that you need to inject store in constructor)

this.store.dispatch(new AddEmployeeAction({Id:101,Name:"test",Gender:"F"}))


Now we need to handle this action in reducer

so reducer will be like below

export function reducer(state: State = initialState, action: any): State {
switch (action.type) {
case "Add_Employee":
if (action.payload) {
let employees = state.employees;
employees.push(payload);//add new employee
return Object.assign({}, state, {
employees: employees
});
}
}
}

This is very straightforward code.

  We have added case for 'Add_Employee' action in reducer in that we have added employee in existing list and return cloned state (since state is mutable)

  In Next post we will see how to handle database updation (Side Effects) in Redux. Stay tuned.


   ← Redux - Action

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