[Redux] Writing a Todo List Reducer (Toggling a Todo)

Learn how to implement toggling a todo in a todo list application reducer.

 

let todo = (state = [], action) => {
  
  switch(action.type){
    case 'ADD_ITEM':
      return state = [
        ...state,
        {
          text: action.text,
          id: action.id,
          completed: false
        }
      ];
    case 'TOGGLE_ITEM':
      return state.map( (todo) => {
        if(todo.id !== action.id){
          return todo;
        }else{
         return {
          ...todo,
          completed: !todo.Completed// will overwirte the todo object's completed prop
        }; 
        }
      })
    default:
      return state;
  }
};

let testTodo_addItem = () => {
  let stateBefore = [];
  let action = {
    type: 'ADD_ITEM',
    text: 'Learn Redux',
    id: 0
  };
  let stateAfter = [
    {
      text: 'Learn Redux',
      id: 0,
      completed: false,
    }
  ];
  
  deepFreeze(stateBefore);
  deepFreeze(action);
  
  expect(
    todo(stateBefore, action)
  ).toEqual(stateAfter);
};

let testTodo_toggleItem = () => {
  let stateBefore = [
    {
      text: 'Learn Redux',
      id: 0,
      completed: false
    },
    {
      text: 'Learn Angular2',
      id: 1,
      completed: false
    }
  ];
  let action = {
    type: 'TOGGLE_ITEM',
    id: 1
  };
  
  let stateAfter = [
    {
      text: 'Learn Redux',
      id: 0,
      completed: false
    },
    {
      text: 'Learn Angular2',
      id: 1,
      completed: true
    }
  ];
  
  deepFreeze(stateBefore);
  deepFreeze(action);
  
  expect(
    todo(stateBefore, action)
  ).toEqual(stateAfter);
}

testTodo_toggleItem();

console.log("All tests passed!");