Learn React Hooks

Defining the todos reducer

Next, we are going to define a function for the todo items. Here, we are going to handle the FETCH_TODOS, ADD_TODO, TOGGLE_TODO and REMOVE_TODO actions.

Let's define the todosReducer function now:

1. In the src/reducers.js file, define a new function, which is going to handle these actions:

function todosReducer (state, action) {    switch (action.type) {

2. For the FETCH_TODOS action, we simply replace the current state with the new todos array:

        case 'FETCH_TODOS':            return action.todos

3. For the ADD_TODO action, we are going to insert a new item at the beginning of the current state array:

        case 'ADD_TODO':            const newTodo = {                id: generateID(),                title: action.title,                completed: false            }            return [ newTodo, ...state ]

4. For ...