boardFormThunk.ts

전체 코드

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

import { firestore, appAuth } from "../../firebase";
import { collection, addDoc, doc, setDoc } from "firebase/firestore";
import { customAlphabet } from "nanoid";
import { getAuth } from "firebase/auth";

interface UserData {
  // index: string;
  title: string;
  content: string;
  timedata: Date;
}

//1 함수는 첫 번째 매개변수로 액션 이름 문자열
//2 매개변수를 받아서 비동기 작업을 수행하고 작업이 성공하면 결과 데이터를 반환
const addUserData = createAsyncThunk<
  { boardId: any; boarditem: UserData },
  { boardId: any; boarditem: UserData }
>("user/fetchUserData", async (data, thunkAPI) => {
  const { boardId, boarditem } = data;

  const { title, content } = boarditem;

  const nanoid = customAlphabet("0123456789", 8);
  const id = nanoid();

  const auth = getAuth();
  const currentUser = auth.currentUser;
  const userId = currentUser?.uid;

  const userCollection = collection(firestore, "users");

  const userDataCollrection = collection(
    userCollection,
    "userData",
    userId as string
  );

  const dataIn = {
    index: id,
    title: title,
    content: content,
    timedata: new Date(),
  };

  await addDoc(userDataCollrection, dataIn);

  // 반환할 데이터 형식
  const responseData = {
    boardId: boardId,
    boarditem: {
      title: title,
      content: content,
      timedata: new Date(),
    },
  };

  return responseData;
});

export default addUserData;

학습

createAsyncThunk를 사용하여 Firebase와 상호작용하면서
비동기 작업을 수행하는 액션 생성자 함수인 addUserData를 정의

함수는 두 개의 제네릭 타입 매개변수
addUserData = createAsyncThunk<
{ boardId: any; boarditem: UserData },
{ boardId: any; boarditem: UserData }>

• 1번 매개 변수 : 액션 생성자 함수가 반환하는 액션 객체의 형태를 정의
• 2번 매개 변수 : 액션 객체 내의 payload 필드에 들어가는 데이터의 구조를 정의

async (data, thunkAPI)

• const { boardId, boarditem } = data;를 통해
  data 객체에서 boardId와 boarditem을 추출

const responseData={}

• 반환할 데이터 형식을 responseData 객체로 정의합니다.
  이 객체에는 boardId와 boarditem이 포함
• 데이터는 Redux 스토어에 디스패치되고 액션을 통해 상태 업데이트

추가로🦒

진짜로 데이터 추가 하는 부분이 너무 어려웠다
타입스크립트까지 사용을 하니 데이터를 어떻게 전달 해야하는 부분과
createAsyncThunk제네릭을 어떻게 보내야하는 지도 어렵고
여기서 진짜 많이 해맸다 그냥 개어려움 ㅜㅜ막막하고
지피티도 이용 하고 블로그 찾고
리덕스데브 툴즈에서는 데이터가 action탭에서는 추가가 되는 건 확인이 되는데
왜 state탭에서는 안나오고 강의를 정말 여러번 보니까 그제서야 아 이렇게 되는 구나를
약간 이해를 하고 수정을 하니 state에 저장 되는 데이터를 확인했다👍

실수한 부분도 있다 만든 slice를 reducer파일에 추가 안해서 해매기도 했다
그래서 파일 제대로 추가 했는지 필수로 확인 하기!