boardDeleteThunk

순9·2023년 9월 18일
0

리액트 게시판

목록 보기
27/54

import

import { createAsyncThunk } from "@reduxjs/toolkit";

//파이어베이스 데이터 삭제
import { collection, getDocs, doc, deleteDoc } from "firebase/firestore";
import { firestore } from "../../firebase";
import { getAuth } from "firebase/auth";

//state에서 데이터 삭제 하기 위해 연동
import { deleteBoard } from "../slices/boardSlice";
import { deleteItem } from "../slices/boardItemSlice";

deleteuserdata

const deleteuserdata = createAsyncThunk<
  { boardId: number }, //함수가 반환하는 비동기생성자 함수 작업의 결과물의 타입을 지정
  { boardId: number }//인자로 받는 데이터의 타입을 지정
>("user/fetchUserDataDeletet", async ({ boardId }, thunkAPI) => {
 
  //파이어베이스 데이터 삭제
  const auth = getAuth();
  const currentUser = auth.currentUser;
  const userId = currentUser?.uid;

  //파이어베이스 하위 컬렉션 경로
  const querySnapshot = await getDocs(
    collection(firestore, "users", "userData", userId as string)
  );

  querySnapshot.docs.forEach(async (items) => {
    const list = items.data();
    const itemId = list.did;
    const itemIdIndex = list.index;

    const rootState: any = thunkAPI.getState();
    const { selectedBoardId } = rootState.board;

    let docId = "";
    if (selectedBoardId === itemId) {
      docId = itemId;

      //삭제할 하위 문서 경로
      const docRef = doc(
        firestore,
        "users",
        "userData",
        userId as string,
        itemIdIndex
      );

      await deleteDoc(docRef);
    }
  });

  //state 삭제
  thunkAPI.dispatch(deleteBoard({ boardId }));
  thunkAPI.dispatch(deleteItem({ boardId }));
  return { boardId };
});

export default deleteuserdata;

학습

createAsyncThunk<T,Z>

  • T: 첫번째 파라미터 비동기 함수가 작업의 결과물의 타입을 지정
  • Z: 두번째 파라미터 파라미터로 받을 데이터의 타입을 지정

파이어베이스 데이터 삭제

profile
1. 사용법 익히기 2. 원리가 뭔지 찾아보기 3. 원리를 공부하기

0개의 댓글