firestoreとreduxのバインディングライブラリ「react-redux-firebase」の使い方

firestoreとreduxのバインディングライブラリ「react-redux-firebase」の使い方

LINEで送る
Pocket

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

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す