Reducers

Reducers specify how the feature state changes in response to actions sent to the store. A reducer function typically looks like this:

todo-reducer.ts

import { Todo } from './todo';
import { TodoActionTypes, TodoActions } from './todo-actions';

export interface TodoState {
  todos: Todo[];
  selectedTodoId: number
}

export const initialState: TodoState = {
  todos: [],
  selectedTodoId: undefined
};

export function todoReducer(
  state: TodoState = initialState,
  action: TodoActions
): TodoState {
  switch (action.type) {
    case TodoActionTypes.AddTodo:
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    case TodoActionTypes.RemoveTodo:
      return {
        ...state,
        todos: state.todos.filter(item => item.id !== action.payload)
      };
    default:
      return state;
  }
}

Register feature reducer#

Before we can update state by dispatching actions, we need to add the reducer to the store. There are 2 options to register a feature reducer:

Option 1: Store Config#

import { configureStore, Store } from 'mini-rx-store';
import todoReducer from './todo-reducer';

const store: Store = configureStore({
  reducers: {
    todo: todoReducer
  }
});

Like this the reducers are ready when the store is initialized.

Option 2: Add feature reducers dynamically#

We can add feature reducers at any time with store.feature.

import todoReducer from './todo-reducer';

store.feature('todo', todoReducer)

Update State#

Now we are all set for updating the todos feature state. Let's dispatch the AddTodo action:

store.dispatch(new AddTodo({id: 1, title: 'Use Redux'}));

store.select(state => state).subscribe(console.log); // Output: {"todo":{"todos":[{id: 1, title: "Use Redux"}]}}

Yes, we did it! The todoReducer processed the action, and the new todo landed in the todos array.