5주차 - fireStore 적용하기

리덕스에서 firestore 데이터 가지고 놀기

 

- firestore 적용하기

 

1) load 할 때 데이터를 가지고 오기

-> 일단은 액션 부터

// 액션 타입
const LOAD = "bucket/LOAD";
...
// 액션 생성 함수
export function loadBucket(bucket_list){
  return {type: LOAD, bucket_list};
}

-> 파이어베이스랑 통신하는 함수 만들기

import {
  collection,
  doc,
  getDoc,
  getDocs,
  addDoc,
  updateDoc,
  deleteDoc,
} from "firebase/firestore";

import {db} from "../../firebase";

// 파이어베이스랑 통신하는 부분
export const loadBucketFB = () => {
  return async function (dispatch) {
    // 데이터를 가져와요!
    const bucket_data = await getDocs(collection(db, "bucket"));
    
    let bucket_list  = [];

    // 하나씩 우리가 쓸 수 있는 배열 데이터로 만들어줍시다!
    bucket_data.forEach((b) => {
      // 콘솔로 확인해요!
      console.log(b.id, b.data());
      bucket_list.push({ id: b.id, ...b.data() });
    });

    // 잘 만들어졌는 지 리스트도 확인해봐요! :)
    console.log(bucket_list);
    dispatch(loadBucket(bucket_list));
  }
}

-> 리듀서를 고치기

```jsx
case "bucket/LOAD": {
      return {list: action.bucket_list}
    }
```

-> 그 후에는, 불러다 쓰기

// App.js
...
// 잠깐!! loadBucketFB를 import해오는 거 잊지말기!
React.useEffect( () => {
    dispatch(loadBucketFB());
  }, []);
...

 

2) create 할 때 firestore 적용

✔️ 순서는 항상 똑같을 거예요! 파이어베이스랑 통신 → 필요하다면 리듀서 고치고 → 불러다 쓰기

import { db } from "./firebase";
import { collection, addDoc } from "firebase/firestore";
...
const docRef = await addDoc(collection(db, 'bucket'), {
     completed: false,
     text: "new"
   })

-> 파이어베이스랑 통신하는 함수 만들기

// 파이어베이스랑 통신하는 부분
export const addBucketFB = (bucket) => {
  return async function (dispatch) {
		// 파이어스토어에 추가하기를 기다려요!
    const docRef = await addDoc(collection(db, "bucket"), bucket);
		// 추가한 데이터 중 id를 가져와서 bucket_data를 만들어줬어요!
    const bucket_data = { id: docRef.id, ...bucket };
		// 그럼 이제 액션을 일으키자! (수정해달라고 요청하자!)
    dispatch(createBucket(bucket_data));
  }
}

-> 불러다 쓰기

// App.js
...
// 잠깐!! addBucketFB를 import해오는 거 잊지말기!
const addBucketList = () => {   
    dispatch(addBucketFB({ text: text.current.value, completed: false }));
  };

 

3) update 할 때 firestore 적용

✔️ 순서는 항상 똑같을 거예요! 파이어베이스랑 통신 → 필요하다면 리듀서 고치고 → 불러다 쓰기

import { db } from "./firebase";
import { collection, doc, updateDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "[도큐먼트 아이디]");
    await updateDoc(docRef, {
      completed: true,
    });

  }, []);

-> 파이어베이스랑 통신하는 함수 만들기

// 파이어베이스랑 통신하는 부분
export const updateBucketFB = (bucket_id) => {
  return async function (dispatch, getState) {
		// 수정할 도큐먼트를 가져오고,
    const docRef = doc(db, "bucket", bucket_id);
		// 수정합시다!
    await updateDoc(docRef, { completed: true });
		// getState()를 사용해서 스토어의 데이터를 가져올 수 있어요.
    console.log(getState().bucket);
    // bucket list 데이터를 가져와요.
    const _bucket_list = getState().bucket.list;
		// findIndex로 몇 번째에 있는 지 찾기!
    const bucket_index = _bucket_list.findIndex((b) => {
			// updateBucketFB의 파라미터로 넘겨받은 아이디와 
			// 아이디가 독같은 요소는 몇 번째에 있는 지 찾아봐요!
      return b.id === bucket_id;
    })

    dispatch(updateBucket(bucket_index));
  };
};

-> 불러다 쓰기

// Detail.js
...
// 잠깐!! updateBucketFB를 import해오는 거 잊지말기!
<button onClick={() => {
          dispatch(updateBucketFB(bucket_list[bucket_index].id));
      }}>완료하기</button>
...

 

4) delete 할 때 firestore 적용

✔️ 순서는 항상 똑같을 거예요! 파이어베이스랑 통신 → 필요하다면 리듀서 고치고 → 불러다 쓰기

import { db } from "./firebase";
import { collection, doc, deleteDoc } from "firebase/firestore";
...
React.useEffect(async() => {
    const docRef = doc(db, "bucket", "[도큐먼트 아이디]");
    await deleteDoc(docRef);

  }, []);

-> 파이어베이스랑 통신하는 함수 만들기

// 파이어베이스랑 통신하는 부분
export const deleteBucketFB = (bucket_id) => {
  return async function (dispatch, getState) {
    if(!bucket_id){
      window.alert("아이디가 없네요!");
      return;
    }
    const docRef = doc(db, "bucket", bucket_id);
    await deleteDoc(docRef);

     const _bucket_list = getState().bucket.list;
     const bucket_index = _bucket_list.findIndex((b) => {
       return b.id === bucket_id;
     });

     dispatch(deleteBucket(bucket_index));
  }
}

-> 불러다 쓰기

// Detail.js
...
<button
        onClick={() => {
          dispatch(deleteBucketFB(bucket_list[bucket_index].id));
          history.goBack();
        }}
      >
        삭제하기
      </button>
...