★前回の記事
タスクの完了フラグの切り替え(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)。
動作確認
ブラウザで確認しましょう。
念のため、Firebaseのデータも確認します。
更新されていました。
以上でタスクの完了/未完了切り替え処理の修正はおしまいです。
これで全ての機能をFirebaseと連携することができました!おめでとうございます!
★次回の記事
★目次