리액트 기초반 - 5

미들웨어

firestore 데이터를 리덕스 스토어에 넣으려면 미들웨어를 설치해야 된다.
yarn add redux-thunk

firestore에서 데이터를 가져올 때 비동기 통신을 한다.
서버에서 데이터를 가지고 오는 것은 응답이 끝날 때 까지 바로 알수가 없다. 이런 것을 비동기 통신이라고 한다. 비동기로 데이터를 가져오면 리덕스 스토어는 미들웨어를 통해서 테이터를 가져온다.
리덕스에서 비동기 통신을 할 때 필요한 미들웨어 먼저 설치.

리덕스는 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리]한다. 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리역할을 한다.
[액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리하게 된다.

redux-thunk

액션 생성 함수는 객체를 반환하지만 redux-thunk는 객체{} 대신 함수f()를 생성하는 액션 생성함수를 작성할 수 있게 해준다.

리덕스는 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있다.

Store에 미들웨어 추가

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import bucket from "./modules/bucket";

export const history = createBrowserHistory();

const middlewares = [thunk]; 

const enhancer = applyMiddleware(...middlewares);
const rootReducer = combineReducers({ bucket });
const store = createStore(rootReducer, enhancer);

export default store;

const middlewares = [thunk, 이외에 추가한 미들웨어 입력];
const enhancer = applyMiddleware(...middlewares); 미들웨어 적용을 enhancer로 선언
const store = createStore(rootReducer, enhancer); 스토어에 적용

리덕스에서 미들웨어로 파이어스토어 데이터 다루기

import {db} from '../../firebase'
import { collection, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc } from 'firebase/firestore'

데이터 가져오기

액션

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

서버통신

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

불러오기

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

데이터 추가하기

// 추가하기 미들웨어 create
// 파이어베이스랑 통신하는 부분
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 }));
  };

업데이트 하기

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

업데이트 쓰기

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

제거하기

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

제거하기 쓰기

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

파이어베이스 배포 후 수정해서 다시 배포하려면?
yarn build 후 firebase deploy 또는 yarn firebase deploy