Implementing NgRx - Understand And Add Reducer function In Angular Application

npm install –save @ngrx/store

export function userListReducer(state, action:Action)
{
}

Action interface is imported from @ngrx/store

Please refer to the screenshot below.

We can use the action.type to identify the type of action such as add, update, delete, etc.

Let’s create an initial state as simple object

const intialState={
userList : [“David”, “Aleena”]
}

Then, in the reducer function, I added the initialState as the default value for the state variable

Please refer to the code snippet below

export function userListReducer(state=initialState, action:Action)
{
}

The action argument would have 2 properties.Type and payload(optional)

Based on the type, we can execute different logic inside reducer.

We can use multiple if statements or a switch statement in reducer function to accomplish this.

In this article, we are going to create add user action.

We cannot use the statement ‘initialState.userList.push(newUser)’.

Because, in ngrx, the state should be immutable - ie, we cannot change the current or previous state.

So, in ngrx, we will copy the previous state and add the new change in copied state then return as new state.

In short, we should never touch the existing state.

Please refer to the code snippet below.

export function userListReducer(state = intialState, action: Action) {
  switch (action.type) {

    case 'ADD_USER':

      return { ...state, userList: [...state.userList, action] };

  }
}

Please refer to the screenshot below for better clarity.

Here we are using the spread (…) operator to copy the current state.

Spread operator is a new addition to the set of operators in JavaScript ES6. This operator is used to make shallow copies of javascript objects.

Let’s understand the above return statement first.

…state will copy all the properties of current state.

Then, we need to update its userList property.(here, we have one property only, but in real app, there might be multiple properties for a state and we might need to update any specific property only).

Since the userList is an array, we should copy all of its current elements using spread operator and then add the new user.

…state.userList pull-out all elements from the array and create a new array by adding a new user to it.

Finally, the reducer function will return the new state which is created immutably from the old state.

Now, at the first time when our application starts up and NgRx loads our reducer, it would initialize our state with the initial state.

To use that initial state and return it unchanged, we need to add a default case to our switch statement to handle any cases we're not explicitly handling.

NgRx will dispatch it automatically when it starts.

In default case, we simply want to return the unchanged state - initial state.

Please refer to the screenshot below.

Great!

We have created our reducer method successfully!

Summary

In this article, we learned about the NgRx reducer method.

In my next article, we will learn about the NgRx Action.

Next Article Link : Implementing NgRx - Understand And Add Actions In Our Application

Happy Learning