ブログ

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まわりを書くのが面倒な人にはおすすめです。