★前回の記事
他のユーザのタスクは閲覧できて、自身のタスクは閲覧・編集できるようになったアプリに発生した2つのバグのうち、もう1つのバグを修正します。
バグ再現手順
- ログインします
- 自身のタスク一覧が表示されることを確認します。
- ログアウトします。
- “タスク一覧を読み込み中…” がずっと表示され、タスク一覧が表示されません。
バグの原因
react-redux-firebaseではログアウト時にstate.firebase.data
とstate.firebase.auth
の内容を全てクリアします。そのため、todos
の内容がundefined
になり、"読み込み中"がずっと表示されます。
修正方針
react-redux-firebaseに preserveOnLogout を設定します。 この設定をすると、ログアウト時にもデータが消えません。
コーディング
preserveOnLogoutを、reactReduxFirebaseに設定します。todosの内容とusersの内容をログアウト時にも表示したいので、この2つを設定します。
src/index.js
const createStoreWithFirebase = compose( applyMiddleware(thunk.withExtraArgument({getFirebase}), reactReduxFirebase(firebase, {userProfile: 'users', preserveOnLogout: ['todos', 'users']}) // 変更 )(createStore);
動作確認
- ログインします
- タスク一覧が表示されることを確認します。
- ログアウトします。
- タスク一覧が引き続き表示されることを確認します。
以上でログアウト時に”読み込み中”がずっと表示されるバグが修正できました。 こちらのバグも見つけにくいものでした。ログアウト時のテストもテストケースに含めておくとよいですね。
★次回の記事
★目次