[Redux] 리덕스에서 FireStore 데이터 Read (CRUD)

 

리덕스에  FireStore 데이터를 넣어보자

 

 

Road 순서

---

1. 액션 타입만들기 

// ---- Actions ----
const LOAD = "card/LOAD";

2. 액션 생성함수 만들기 

// ----- Action Creators ----
// loadCard 모든 카드의 리스트를 다 가지고 있어야 합니다 
export function loadCard(card_list){
  return { type: LOAD, card_list };
}

3. 파이어베이스와 통신하는 미들웨어 만들기  

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


// 미들웨어 함수 만들기
//middlewares
export const loadCardFB = () => {
  //리덕스 청크는 함수를 리턴 합니다
  // 인자로 dispatch 를받아온다 , dispatch를 받아와서 액션을 일으킴
  return async function (dispatch) {
    // 데이터 가져와보기 (비동기통신)
    const card_data = await getDocs(collection(db, "card"));
    console.log(card_data);

    // card_data 데이를 배열로 바꾸기
    let card_list = [];
    card_data.forEach((c) => {
      // 데이터 확인
      console.log(c.data());
      // card_list 배열 안에 딕셔너리 형태의 데이터 넣기 
      //id도 함께 불러오기
       card_list.push({id:c.id, ...c.data() });
    });
    console.log(card_list);

    dispatch(loadCard(card_list))
  };
};

4. 디스패치 값  값 넘겨주기 

import { useDispatch } from "react-redux";
import { loadCardFB } from "../redux/modules/Card";
const dispatch = useDispatch();

React.useEffect(() => {
    dispatch(loadCardFB());
  }, []);

5. 리듀서 case 추가하기

// ---- Reducer -----
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case "card/LOAD": {
      console.log(action.card_list);
      return { card: action.card_list };
    }

    default:
      return state;
  }
}