1. 11
    Redux: Writing a Todo List Reducer (Adding a Todo)
    4m 11s

Redux: Writing a Todo List Reducer (Adding a Todo)

InstructorDan Abramov

Share this video with your friends

Send Tweet

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

jpbamberg1993
~ 8 years ago

Why are you setting the default state of the reducer to an empty array? Why not an empty hash {}? since it is being placed within an array? and the array is supposed to be an array of objects?

dan entous
~ 7 years ago

yes, the array represents a collection of todos, starting out as an empty collection.

Jason Tanner
~ 7 years ago

Is anyone else unable to run the plunkr here? It looks like the expect and deep-freeze javascript libraries are not providing either variables for use in our script.jsx file.

Christian
~ 7 years ago

Here's what adding a todo with a list reducer could look like in Immutable.js:

const { List, Record } = Immutable;

const Todo = Record({
  id: 0,
  text: "",
  completed: false
});

const todos = (state = List(), action) => {
  switch (action.type) {
    case "ADD_TODO":
      return state.push(
        Todo({
          text: action.text,
          id: action.id
        })
      );
    default:
      return state;
  }
};

const testAddTodo = () => {
  const stateBefore = List();
  const action = {
    type: "ADD_TODO",
    id: 0,
    text: "Learn Redux"
  };
  const stateAfter = List([
    Todo({
      text: "Learn Redux",
      id: 0,
      completed: false
    })
  ]);

  expect(todos(stateBefore, action)).toEqual(stateAfter);
};

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