react-redux-firebase使用時、ログアウト時にデータが消えないようにする (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

他のユーザのタスクは閲覧できて、自身のタスクは閲覧・編集できるようになったアプリに発生した2つのバグのうち、もう1つのバグを修正します。

バグ再現手順

1. ログインします
2. 自身のタスク一覧が表示されることを確認します。
3. ログアウトします。
4. “タスク一覧を読み込み中…” がずっと表示され、タスク一覧が表示されません。

バグの原因

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);

動作確認

1. ログインします
2. タスク一覧が表示されることを確認します。
3. ログアウトします。
4. タスク一覧が引き続き表示されることを確認します。

以上でログアウト時に”読み込み中”がずっと表示されるバグが修正できました。 こちらのバグも見つけにくいものでした。ログアウト時のテストもテストケースに含めておくとよいですね。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com