BETA

【React/Redux/Firebase】ログイン機能付きToDoアプリ作ってみた

投稿日:2019-08-18
最終更新:2019-08-21

はじめに

React入門を読み終えたので、復習がてら定番のToDoアプリを作ってみました。
Firebaseの勉強も兼ねて、ログイン機能と永続化機能も実装してみました。
学習用に作ったので二番煎じ感が凄いですが、実装の参考になれば幸いです。

作ったもの

ログイン機能付きのシンプルなToDoアプリです。
ユーザごとにToDoタスクが保存されます。
サインアップやGoogleログインも出来るので、良ければご利用ください。
コードはGitHubにあります。

https://react-todo-d75a3.firebaseapp.com

技術スタック

  • React
  • Redux
    • React Redux
    • Redux Thunk
  • React Router
    • Connected React Router
  • Material-UI
  • Firebase
    • Authentication: ユーザ認証
    • Firestore: ToDoリストの永続化
    • Hosting: デプロイ

ちなみに、redux-logger入れてるので、コンソールでActionとStoreの様子が見れます。

ハマった点

ログイン済みなのにログイン画面にルーティングされる問題

このアプリでは、未ログインの場合はログイン画面に飛ばし、ログイン済みの場合はToDoリスト画面に飛ばすという処理を行っています。
しかし、初回ローディング時にログイン済みにも関わらず、必ずログイン画面に飛ばされてしまうという問題がありました。
原因としては、Firebaseでログイン済みかどうかを確認するメソッドであるFirebase.auth().onAuthStateChanged()が非同期処理のため、ログイン状態を取得する前にルーティングが先に行われ、状態が未ログインのままログイン画面に飛ばされていました。
対策として、ローディング状態を新たに作り、ログイン状態取得の非同期処理中はローディング中にし、取得が完了してからルーティングさせるようにしました。
非同期処理中にローディングを表示する方法はメジャーだと思いますが、この方法になかなか気付けずに結構ハマってしまいました。。。非同期処理に対する理解が足りてなかったですね。

思ったこと

  • シンプルすぎてReduxを使うまでもないアプリですが、Reduxを使うとロジックをコンポーネントから切り離せるので、その点は良いと思いました。
    その分、Redux Thunkで非同期処理を行っているAction Creatorが肥大化してしまっているのが少し気にはなります。(Redux Sagaを使うとマシになる?)
    最近はReduxに代わるシンプルな状態管理ライブラリとしてunstatedも流行っているようですね、使ってみたいです。
  • 今回はFirebaseのAPIを直接使いましたが、react-redux-firebaseなるものを見つけたので、これ使うとイイ感じになると思いました。
  • コンポーネント指向難しいですね。どのくらいの粒度でコンポーネントを分けるべきか迷います。

さいごに

React楽しいですね。色々作れそうな気がしました。
次はもっと実用的なアプリを作りたいです。
ReactNativeとかElectronとかも使ってみたいですね。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@skylokenの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!