firestoreとreduxをバインディングするライブラリを見つけたので触ってみました。
※公式ライブラリではありません。
https://github.com/prescottprue/react-redux-firebase
firestoreのバインディングだけ使いたい場合はこれだけで良さそうです。
https://github.com/prescottprue/redux-firestore
使うメリットは?
・すぐに使える認証のサポート(データベース/ファイアストアからのユーザープロファイルの自動読み込み)
・リアルタイムデータベース、Firestore、ストレージを含むFirebaseプラットフォームの完全なサポート
React Hooks(useFirebaseConnect、useFirestoreConnect)または高次コンポーネント(firebaseConnectおよびfirestoreConnect)によるリスナーの自動バインド/バインド解除
・ポピュレーション機能(mongoのPopulateまたはSQLのJOINに類似)
・小さなデータ(値を使用)または大きなデータセット(child_added、child_removed、child_changedを使用)をサポート
・orderByChild、orderByKey、orderByValue、orderByPriority、limitToLast、limitToFirst、startAt、endAt、equalToなど、サポートされる複数のクエリタイプ
・redux-thunkとredux-observableを含むたくさんの統合例
・サーバー側レンダリングのサポート
いろいろありますが、 reduxとfirebaseをバイディングするライブラリです。
これを使うと書くのが面倒なredux周りの記述を省くことができます。
使い方
ドキュメント通りに設定するだけです。
接続が完了するとこんな感じでredux内にデータがセットされます。
コンポーネント内で下記のようにコレクションを指定するだけでstoreにデータが入ります。
useFirestoreConnect(['todos'])
ログイン
firebase.login({ email, password })
データを追加したい時
これだけでfirestoreにデータが追加され、redux stateが更新されます。
簡単です。firestore.add(“コレクション名”, object)
const firestore = useFirestore() const addTodo = ()=> { return firestore.add('todos', { text: 'Sample' }) }
データ取得
where
useFirestoreConnect({ collection: "todos", where: [["text", "==", "Sample"]] })
docを指定する場合
useFirestoreConnect({ collection: "todos", doc: "********" })
こんな感じ、firebaseで出来ることは基本なんでもできそう
ドキュメントがちょっとわかりづらいので注意。
自分の場合はredux周りは自分で書きたいので使わなくても良いかなと思いました。
reduxまわりを書くのが面倒な人にはおすすめです。
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。