boardItemModifySlice

import

import { createSlice } from "@reduxjs/toolkit";
import modifyUserData from "../thunks/boardModifyThunk";

초기값

interface UserdataType {
  did: number;
  title: string;
  content: string;
  timedata: Date;
  userUid: string;
  isModified: boolean;
}

interface MyState {
  boarditem: Record<number, UserdataType[]>;
}

//초기 값 설정
const initialState: MyState = {
  boarditem: {}, //객체 형태
};

Record<T,Y>블로그 참고
T:key
Y:객체 타입

boardItemModify

const boardItemModify = createSlice({
  name: "boardModify",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(modifyUserData.pending, (state, action) => {
        console.log(`비동기 수정 요청 중`);
      })
      .addCase(modifyUserData.fulfilled, (state, action) => {
        console.log(`비동기 수정 성공`);
        const { boardId, boarditem: bItem } = action.payload;

        const updatedBoardItem = { ...state.boarditem };

        updatedBoardItem[boardId] = updatedBoardItem[boardId] || [];
        updatedBoardItem[boardId].push({
          did: bItem.did,
          title: bItem.title,
          content: bItem.content,
          timedata: bItem.timedata,
          userUid: bItem.userUid,
          isModified: true,
        });
        return {
          ...state,
          boarditem: updatedBoardItem,
        };
      })
      .addCase(modifyUserData.rejected, (state, action) => {
        console.log(`비동기 수정 요청 실패`);
      });
  },
});

액션 객체에서 전달된 데이터를 포함하는 객체
const { boardId, boarditem: bItem } = action.payload;
기존 상태 복사
const updatedBoardItem = { ...state.boarditem };
선택된id값을 가진 객체에 빈 배열 또는 선택된 객체 를 넣는다
updatedBoardItem[boardId] = updatedBoardItem[boardId] || [];
선택된 객체에 데이터 추가(수정)
updatedBoardItem[boardId].push({---});
반환 기존 상태 복사 와 수정한 데이터
return {
...state,
boarditem: updatedBoardItem,
};