boardItemSlice.ts

state

전체코드

import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";

//비동기 연동
import addUserData from "../thunks/boardFormThunk";

//입력되는 데이터 타입
interface UserdataType {
  title: string;
  content: string;
  timedata: Date;
}

//타입을 초기 값에 연동 시키위해
//Record 사용 이유 id 값이 key UserdataType[]은 value
interface MyState {
  boarditem: Record<number, UserdataType[]>;
}

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

const boardItemSlice = createSlice({
  name: "boardItemMap", // 슬라이스 이름
  initialState, //초기 값
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(addUserData.pending, (state, action) => {
        console.log(`비동기 요청 중`);
      })
      .addCase(addUserData.fulfilled, (state, action) => {
        // 비동기 작업 완료 후 상태를 업데이트
        console.log(`비동기 요청 성공`);

        //객체 비구조화 할당
        //action.payload 객체에서 boardId와 boarditem 프로퍼티를 추출하여 새로운 변수에 할당하는 역할
        const { boardId: boardIditem, boarditem: bItem } = action.payload;

        // boarditem 객체에 boardId를 키로 사용하여 데이터를 초기화
        if (!state.boarditem[boardIditem]) {
          state.boarditem[boardIditem] = [];
        }

        // 해당 boardId에 데이터 추가
        state.boarditem[boardIditem].push(bItem);
      })
      .addCase(addUserData.rejected, (state, action) => {
        console.log(`비동기 요청 실패`);
      });
  },
});


export default boardItemSlice.reducer;

학습

Record<number, UserdataType[]>

• Record 제네릭 참고
• TypeScript에서 제공되는 제네릭 타입 특정 키(속성)와
  그에 해당하는 값의 타입을 매핑하기 위해 사용되는 이름 있는 타입
• 1번 제네릭 객체의 키(속성)는 모두 숫자(number)
• 2번 제네릭 객체의 각 키(숫자)에 대응하는 값은 배열

BrowserRouter

• 블로그 참고