Complex Reducers

Complex state management using Redux in a simple to-do app

To understand Redux in the context of a much larger state, let’s look at a more realistic example. The upcoming example describes a simple to-do app, and we’ll look at how to implement state management for this app. The to-do app will manage lists of to-do items and also contain a logged-in user area. The state will consist of two top-level properties:

1. todos (of type array)
2. user (of type object)

This is reflected in our current state:

const initialState = Object.freeze({
  user: {},
  todos: [],
});

To ensure that a new state object is being created instead of mutating the previous object, the initial state object is wrapped by Object.freeze(). If there is an attempt to mutate the **state object **directly, a TypeError will be thrown: