タスク完了フラグの切り替え処理の修正 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

タスクの完了フラグの切り替え(toggleTodo)をFirebaseと連携します。

toggleTodoの変更

actionsのtoggleTodoを変更します。

src/actions/index.js

export const toggleTodo = id => {
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    const state = getState();
    const todo = state.firebase.data.todos[id];
    dispatch({ type: 'TOGGLE_TODO_REQUEST', text: todo.text, completed: !todo.completed });  // #2
    firebase.update(`todos/${id}`, {completed: ! todo.completed})  // #1
    .then(() => {
      dispatch({ type: 'TOGGLE_TODO_SUCCESS', text: todo.text, completed: !todo.completed });  // #2
    }).catch(err => {
      dispatch({ type: 'TOGGLE_TODO_ERROR', text: todo.text, completed: !todo.completed, err });  // #2
    });
  }
}
  • タスクの完了フラグの切り替えはupdateで行います(#1)。updateはパスに存在するデータの一部を書き換える時に使います。パスは`todos/${id}`で、テンプレート文字列を使っています。
  • どのタスクをどのように変更したか表示したいので、タスクのテキストと完了フラグをactionとして渡しています。(#2)

reducerも書き換えます。

src/reducers/todos.js

const getStringForCompleted = (completed) => (  // #2
  completed ? '完了' : '未完了'
)

const todos = (state = {}, action) => {
  switch (action.type) {
    // 中略
    case 'TOGGLE_TODO_REQUEST':
      return {...state, notice:   // #1
        '"' + action.text + '"のステータスを"'
        + getStringForCompleted(action.completed)
        + '"に変更中'}
    case 'TOGGLE_TODO_SUCCESS':
      return {...state, notice:  // #1
        '"' + action.text + '"のステータスを"'
        + getStringForCompleted(action.completed)
        + '"に変更しました'}
    case 'TOGGLE_TODO_ERROR' :
      return {...state, notice:  // #1
        '"' + action.text + '"の更新中にエラーが発生しました。'}
    // case 'TOGGLE_TODO’: は削除  // #3
    default:
      return state
  }
}
  • タスクの追加処理と同様、画面に表示する文言をnoticeにセットします(#1)。
  • completedの文字列表現を返す関数を作成しました(#2)。
  • case ‘TOGGLE_TODO’ はもう使用しないので削除します(#3)。

動作確認

ブラウザで確認しましょう。

f:id:yucatio:20180929100009p:plain

念のため、Firebaseのデータも確認します。

f:id:yucatio:20180929100421p:plain

更新されていました。

以上でタスクの完了/未完了切り替え処理の修正はおしまいです。

これで全ての機能をFirebaseと連携することができました!おめでとうございます!

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com