Example of a Reducer

Let’s explore what a Reducer is in NgRx.

What is a Reducer?

Reducers handle the functionality where we go from one State to the next.

A Reducer doesn’t implement an interface as the Action does, but it does return a State object. The Reducer function takes in two arguments, that is, the State and the Action.


For our Managing Apples example, a Reducer could look as follows:

First, we define the interface of our State model in apples-reducer.ts:

export interface State {
     applesCount: number;

Then, we create an initial state object, along with some default values:

export const initialState : State = {
    applesCount: 1;

Get hands-on with 1200+ tech skills courses.