【React】フックとRealtime DatabaseをFetch APIで連携（React + Firebase環境）

Reactの続きです。前回はフック(React Hooks)とjson-serverをFetch APIで連携しました。今回はフックとRealtime DatabaseをFetch APIで連携します。Create React App環境にFirebaseをインストールしてクラウド上のRealtime Databaseのデータを読み込めるようにします。それではいきましょう！

【目次】

前回のおさらい
Firebaseをインストール
Firebaseのインポート、初期設定
データベースにcounterデータを追加
Fetch APIで読み込む
最後に：フックとDBの使い分け（データの永続化）

※参考：前回記事
【React】フックとjson-serverをFetch APIで連携（Reactライフサイクルの理解） - クモのようにコツコツと

※参考：Reactを習得するためにやったことまとめ
qiita.com

前回のおさらい

前回、フックとjson-serverをFetch APIで連携した。データ読み込みとReactレンダリングのタイミングを合わせるためにReactライフサイクルの理解が深まった。

※参考：【React】フックとjson-serverをFetch APIで連携（Reactライフサイクルの理解） - クモのようにコツコツと

今回はCreate React App環境にFirebaseをインストールして、フックとRealtime DatabaseをFetch APIで連携する。

FirebaseのRealtime Databaseは以前、ネイティブJSのみでCRUD操作した。

※参考：【Firebase】Realtime DatabaseにFetch APIでCRUD操作する - クモのようにコツコツと

Firebaseをインストール

まずFirebaseをインストールする。Firebaseドキュメントを参照しながら。

※参考：Add Firebase to your JavaScript project
※参考：Installation & Setup in JavaScript | Firebase Realtime Database

ReactとFirebaseの連携として下記の記事なども参考にさせていただいた。

※参考：ReactでFirebase(Realtime Database)を使う - 坂本研のゼミ室
※参考：Firebaseでお手軽！データ管理画面をつくる | フューチャー技術ブログ
※参考：新：React + FirestoreでCRUD（基礎編） - Qiita

firebaseインストールのコマンド

$ npm install --save firebase

package.json確認、firebaseが追加された！

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "firebase": "^8.2.9", // 追加！
    "gh-pages": "^3.1.0",
    "json-server": "^0.16.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },

Firebaseのインポート、初期設定

Countコンポーネント(Count.jsx)にfirebaseをインポートする

import firebase from "firebase/app";
import 'firebase/database';

FIebaseの初期設定

// Config
const config = {
    apiKey: "AIzaSyBju9iq3ug6gJMqyVsoGX_YByHt6L3Dh0c",
    authDomain: "kumokotsu-test.firebaseapp.com",
    databaseURL: "https://kumokotsu-test-default-rtdb.firebaseio.com",
    storageBucket: "kumokotsu-test.appspot.com"
};
firebase.initializeApp(config);

これは以前作った「KUMOKOTSU-TEST」プロジェクトの設定値

※参考：【Firebase】Realtime DatabaseにFetch APIでCRUD操作する - クモのようにコツコツと

変数dbでFirebaseのRealtime Databaseを設定する

const db = firebase.database();

dbがちゃんと取得できてるかコンソールで確認しよう。

console.log(db);

ブラウザ確認

アプリを起動

$ npm start

クルクルが起動〜♪ f:id:idr_zz:20210224054701j:plain

コンソール確認 f:id:idr_zz:20210224054811j:plain お、dbが読み込まれている！

データベースにcounterデータを追加

次にRealtime Databaseの管理画面でcounterのデータを追加する。

プラスアイコンを押すと f:id:idr_zz:20210224055041j:plain

キー名と値が追加できる f:id:idr_zz:20210224055339j:plain

キー名はcounter、値の所でさらにプラスアイコンを押す f:id:idr_zz:20210224055234j:plain

nameキー（値は羊）、countキー（値は0）を入力して「追加」ボタンを押す f:id:idr_zz:20210224055412j:plain

couterデータが追加された！ f:id:idr_zz:20210224055431j:plain

「.json」を足したURLを開くと

https://kumokotsu-test-default-rtdb.firebaseio.com/counter.json

やった！データが表示された♪ f:id:idr_zz:20210224055510j:plain

※参考：https://kumokotsu-test-default-rtdb.firebaseio.com/counter.json

よし、このデータをReact環境のフックで読み込みたい。

Fetch APIで読み込む

前回のjson-serverのURLを先ほどのRealtime DatabaseのURLに変更する

    useEffect(() => {
        // fetch('https://my-json-server.typicode.com/ryo-i/react-hook-test/data/1') // json-server
        fetch('https://kumokotsu-test-default-rtdb.firebaseio.com/counter.json') // realtime database
            .then(res => res.json())
            .then(
                (result) => {
                    console.log(result);
                    setName(result.name);
                    setCount(result.count);
                },
                (error) => {
                    console.log(error);
                    const errData = {
                        name: '名無し',
                        count: 0
                    }
                    setName(errData.name);
                    setCount(errData.count);
                }
            );
    }, []);