[React]FireStore

Firbaseとは?

FireBaseショートカット

BaaS (Backend as a Service)

バックエンドはサービスとして借りました.Firebaseを例にとると、APIの形式でデータベース、ソーシャルサービス連動(ソーシャルログイン)、ファイルシステムなどを提供する.

FireStore

Firebaseに含まれるサービスの1つで、柔軟で拡張性のあるNoSQLクラウドデータベースです.
構造:

セット:ドキュメント(ドキュメンタリー)のセット

Document:JSON形式格納データ

Firebaseのバインド

Firebaseパッケージのインストール

yarn add firebase

configのインポート

(1)srcフォルダのサブフォルダにFirebaseを追加する.jsファイルの作成

//firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
// firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

(2)FirebaseダッシュボードのWebボタン

(3)アプリケーション名を書き、しばらく待つとsdk付加領域にテキストが表示されます.
上のFirebaseConfigの内容のみです.jsに貼り付け

(4) App.jsのfirebase.jsからエクスポートされたFirestoreのインポート

import { firestore } from "./firebase";

(5)ComponentDidMountからデータを読み込む

...
const bucket = firestore.collection("buckets");
// 하나만 확인하기
bucket
  .doc("bucket_item")
  .get()
  .then((doc) => {
  // .exists를 써서 데이터가 있는 지 없는 지 확인
  if(doc.exists){
    // 데이터를 콘솔에 찍어보기
    console.log(doc.data());
  }
});
//전체 확인하기
bucket
  .get()
  .then((docs) => {
  let bucket_data = [];
  docs.forEach((doc) => {
    // 도큐먼트 객체를 확인
    console.log(doc);
    // 도큐먼트 데이터 가져오기
    console.log(doc.data());
    // 도큐먼트 id 가져오기
    console.log(doc.id);

    if (doc.exists) {
      bucket_data = [...bucket_data, { id: doc.id, ...doc.data() }];
    }
  });

  console.log(bucket_data);
  ...

FireStoreデータの使用

文書の確認

app.jsでのFirestoreデータの使用

(1)データの追加
コレクションの検索→追加
ダッシュボードが正しく追加されているかどうかを確認します

bucket.add({ text: "수영 배우기", compeleted: false });

(2)データの修正
コレクションを検索し→ドキュメントidに設定

bucket.doc("bucket_item").update({ text: "수영 배우기", compeleted: false });

(3)データ消去
コレクションの検索→ドキュメントidで削除

bucket.doc("bucket_item").delete([도큐먼트 ID]);

冗長性とFireBase

ミドルウェア

reduceデータを修正するには[動作はdispatch→reducerで処理される]プロセスがあります.ミドルウェアは、この過程の間で事前に作業する中間橋梁のようなものです.つまり.[動作開始→ミドルウェアをする→Reducerで処理]この手順で処理

-Firestoreデータをリカバリストアに入れますか?

（1）リードに非同期通信を行うために必要なミドルウェアを先に取り付ける

yarn add redux-thunk

ミドルウェアredux-thunkの役割

アクション作成関数はオブジェクトを返しますが、redux-thunkでは、オブジェクトを作成するのではなく、アクション作成関数を作成できます.

アクション作成関数を作成する必要があるのはなぜですか?

デフォルトでは、reduceはアクションオブジェクトをdispatchします.→すなわち,関数を生成すると,特定の動作が発生する前に条件を与えたり,ある動作をあらかじめ処理したりすることができる.

(2) configStore.ミドルウェアをjsに追加

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";	// 미들웨어
import bucket from "./modules/bucket";
import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

const middlewares = [thunk];	// 미들웨어

const enhancer = applyMiddleware(...middlewares);	// 미들웨어
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);

export default store;

         `

Firestoreの適用

1.ロード時にデータをインポート

(1)Firebaseと通信する関数の作成

const bucket_db = firestore.collection("bucket");

// 파이어베이스랑 통신하는 부분
export const loadBucketFB = () => {
  return function (dispatch) {
                
    bucket_db.get().then((docs) => {
      let bucket_data = [];
      docs.forEach((doc) => {
        // 도큐먼트 객체를 확인
        console.log(doc);
        // 도큐먼트 데이터 가져오기
        console.log(doc.data());
        // 도큐먼트 id 가져오기
        console.log(doc.id);

        if(doc.exists){
          bucket_data = [...bucket_data, {id: doc.id, ...doc.data()}];
        }
      });

      console.log(bucket_data);
      // 액션 생성 함수한테 우리가 가져온 데이터를 넘기기
      dispatch(loadBucket(bucket_data));
    });
  };
};

(2)Reduser水晶

case "bucket/LOAD": {
  if(action.bucket.length >0){
    return { list: action.bucket };
  }

  return state;
}

(3) App.jsでの使用

// App.js
...
// loadBucketFB를 import해오는 거 잊지말기
// load()를 componentDidMount에서 부르면 된다.
const mapDispatchToProps = (dispatch) => ({
  load: () => {
    dispatch(loadBucketFB());
  },
  create: (new_item) => {
    console.log(new_item);
    dispatch(createBucket(new_item));
  }
});
...

2.createにFirestoreを適用する

順番はいつも同じです.
消防基地と通信→必要に応じてリモコンを直す→入れて書き込む

bucket.add({ text: "수영 배우기", completed: false });

(1)Firebaseと通信する関数の作成

// 파이어베이스랑 통신하는 부분
export const addBucketFB = (bucket) => {
    return function (dispatch) {
        console.log(bucket);
        // 생성할 데이터를 미리 생성
        let bucket_data = { text: bucket, completed: false };

        // add()에 데이터를 넘기기
        bucket_db
            .add(bucket_data)
            .then((docRef) => {
                // id를 추가한다
                bucket_data = { ...bucket_data, id: docRef.id };

                console.log(bucket_data);

                // 성공했을 때는? 액션 디스패치
                dispatch(createBucket(bucket_data));
            })
            .catch((err) => {
                // 여긴 에러가 났을 때 들어오는 구간
                console.log(err);
                window.alert('오류 발생! 나중에 다시 시도해주세요');
            });
    };
};

(2)Reduser水晶

case "bucket/CREATE": {
    const new_bucket_list = [
        ...state.list,
        action.bucket,
    ];
    return { list: new_bucket_list };
}

(3) App.jsでの使用

// App.js
...
// addBucketFB를 import해오는 거 잊지말기
const mapDispatchToProps = (dispatch) => ({
    load: () => {
        dispatch(loadBucketFB());
    },
    create: (new_item) => {
        console.log(new_item);
        dispatch(addBucketFB(new_item));
    }
});
...

3.prestoreをupdateに適用する

順番はいつも同じです.
消防基地と通信→必要に応じてリモコンを直す→入れて書き込む

bucket.doc([id]).update({ text: "수영 배우기", completed: false });

(1)Firebaseと通信する関数の作成

// 파이어베이스랑 통신하는 부분
export const updateBucketFB = (bucket) => {
    return function (dispatch, getState) {
        // state에 있는 값을 가져옴
        const _bucket_data = getState().bucket.list[bucket];

        // id가 없으면? 바로 끝
        if (!_bucket_data.id) {
            return;
        }

        // 새로운 값
        let bucket_data = { ..._bucket_data, completed: true };

        bucket_db
            .doc(bucket_data.id)
            .update(bucket_data)
            .then((res) => {
                dispatch(updateBucket(bucket));
            })
            .catch((err) => {
                console.log("err");
            });
    };
};

(2) Detail.jsでの使用

// Detail.js
...
// updateBucketFB를 import해오는 거 잊지말기
<button onClick={() => {
    dispatch(updateBucketFB(bucket_index));
    props.history.goBack();
}}>완료하기</button>

4.deleteにFirestoreを適用する

順番はいつも同じです.
消防基地と通信→必要に応じてリモコンを直す→入れて書き込む

bucket.doc([id]).delete();

(1)Firebaseと通信する関数の作成

// 파이어베이스랑 통신하는 부분
export const deleteBucketFB = (bucket) => {
    return function (dispatch, getState) {
        const _bucket_data = getState().bucket.list[bucket];
        // id가 없으면? 바로 끝
        if (!_bucket_data.id) {
            return;
        }
        // 삭제하기
        bucket_db
            .doc(_bucket_data.id)
            .delete()
            .then((res) => {
                dispatch(deleteBucket(bucket));
            })
            .catch((err) => {
                console.log("err");
            });
    };
};

(2) Detail.jsでの使用

// Detail.js
...
<button onClick={() => {
    //   dispatch(); <- 괄호안에는 액션 생성 함수가 들어간다.
    // 예시
    dispatch(deleteBucketFB(bucket_index));
    props.history.goBack();
}}>삭제하기</button>
...