Initial State and Reducer

In this lesson, we will define the initialState and reducer for a simple Todo app with useReducer.

We'll cover the following...

Initial state #

We are developing a ToDo app. Our state has a list of ToDo items. Let’s put three items initially so that we see them when the app starts.

const initialState = {
  todos: [
    { id: 1, title: 'Wash dishes' },
    { id: 2, title: 'Study JS' },
    { id: 3, title: 'Buy ticket' },
  ],
  query: '',
};

The IDs are almost always recommended when we have a list in a state. We use them to specify the key prop in React.

Right now, an item has only title in addition to id. We will be using another property, completed ...