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

 

Create 순서

---

1. 액션 타입만들기 

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

2. 액션 생성함수 만들기 

// ----- Action Creators ----
export function createCard(card) {
  console.log("액션을 생성할거야!");
  return { type: CREATE, card };
}

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

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


// 추가
export const createCardFB = (card) => {
  return async function (dispatch) {
    // 어느컬랙션에 넣어줄꺼니 (어떤 파이어스토어,컬랙션 이름,받아오는 데이터)
    //card : addpage에서 버튼을 클릭했을때 받아오는 dispatch 내용
    const docRef = await addDoc(collection(db, "card"), card);
    // data는  doc의 참조값이다 getDoc 으로 데이터 확인
    // console.log(docRef.id, docRef.data());
    console.log((await getDoc(docRef)).data());
    // 리덕스에 넣어주기
    const _card = await getDoc(docRef);
    const card_data = { id: _card.id, ..._card.data() };
    console.log(card_data);
    // 추가하기
    dispatch(createCard(card_data));
  };
};

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

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

const addCardList = () => {
    dispatch(
      createCardFB({
        word: word.current.value,
        explanation: explanation.current.value,
        example: example.current.value,
      })
    );
    history.goBack();
  };

5. 리듀서 case 추가하기

// ---- Reducer -----
export default function reducer(state = initialState, action = {}) {
    case "card/CREATE": {
      console.log("이제 값을 바꿀거야!");
      let new_card_list = [...state.card, action.card];
      return { card: new_card_list };
    }

    default:
      return state;
  }
}