스파르타 코딩클럽 - 리액트 5주차(2)

1. 리덕스에서 FireStore 데이터 가지고 놀기(2)

1-1. firestore 적용하기.

• (1). load할 때 데이터를 가지고 와보기!

  만들고 안썼던 기능이 하나 있다. loadBucket 액션 생성 함수! 드디어 사용할 차례이다.

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

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));
    });
  };
};

리듀서를 고치기!

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

      return state;
    }

그후에는 불러다 쓰면된다!

// 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 });

파이어베이스랑 통신하는 함수를 만든다!

// 파이어베이스랑 통신하는 부분
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('오류가 났네요! 나중에 다시 시도해주세요!');
      });
  };
};

리듀서를 고친다!

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

그후에는 불러다 쓰면된다!

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

• (3). update에 firestore 적용하기!

  순서는 항상 똑같다. 파이어베이스랑 통신한다. → 필요하다면 리듀서를 고친다. → 불러다 쓴다.

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

파이어베이스랑 통신하는 함수 만든다.

// 파이어베이스랑 통신하는 부분
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");
      });
  };
};

그후에는 불러다 쓰면된다!

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

• (4). delete에 firestore 적용하기!

  순서는 항상 똑같다. 파이어베이스랑 통신한다. → 필요하다면 리듀서를 고친다. → 불러다 쓴다.

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

파이어베이스랑 통신하는 함수 만든다.

// 파이어베이스랑 통신하는 부분
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");
      });
  };
};

그후에는 불러다 쓰면된다!

// Detail.js
...
<button onClick={() => {
        //   dispatch(); <- 괄호안에는 액션 생성 함수가 들어가야겠죠?
        // 예를 들면 이렇게요.
        dispatch(deleteBucketFB(bucket_index));
        props.history.goBack();
      }}>삭제하기</button>
...