getVisibleTodosの更新 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

getVisibleTodosを更新します。

todosが配列からオブジェクトになったため、filterを直接todosに対して使うことができません。代わりにキーの配列を作成した後、completedの状態でfilterし、reduceを使って空のオブジェクトに追加します。また、todosがundefinedの場合もあるので、ガード節を追加します。

src/containers/VisibleTodoList.js

const getVisibleTodos = (todos, filter) => {
  if(!todos) return todos
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return Object.keys(todos)
        .filter(key => todos[key].completed)
        .reduce((filtered, key) => {
            filtered[key] = todos[key];
            return filtered;
          },
          {}
        )
    case 'SHOW_ACTIVE':
      return Object.keys(todos)
        .filter(key => !todos[key].completed)
        .reduce((filtered, key) => {
            filtered[key] = todos[key];
            return filtered;
          },
          {}
        )
    default :
      return todos;
  }
}