FirebaseとReactとReduxで認証付きのWebアプリのサンプルを作りました

先日書いた記事 FirebaseとReactで認証付きアプリのサンプルを実行するまで の続きで、この認証サンプルをReduxを使うように変更したサンプルを作ってみました。

masamichiueta/react-redux-firebase-auth

動きとしては、

  1. AuthコンポーネントのcomponentWillMountで、firebase.auth.onAuthStateChangedを登録して、すでにログイン状態だったら、stateにuserを登録してログイン後の画面を表示する。未ログイン状態だったらトップ画面を表示する。
  2. ログインページでログインしたらauth.doSignInWithEmailAndPasswordで返ってくるユーザー情報をstateに登録する。

という流れです。

1つ悩んでいることがあって、クライアントでレンダリングするので、firebase.auth.onAuthStateChangedのコールバックが呼ばれるまでに少しラグがあり、一瞬ローディング画面を出さざるを得ない形になっています。

このあたりの解消法というか、ベストプラクティスがありましたら、@masamichiuetaに教えていただけるとありがたいです。

エンジニアリング Firebase React Redux JavaScript


関連記事