boardSlice.ts

import

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

BoardSlice

// 타입이 아닌 초깃값이 들어가야 함
const initialState = {
  boards: [],
  selectedBoardId: null,
};

const boardSlice = createSlice({
  name: "board", //슬라이스 이름
  initialState, //초기값
  reducers: {
    //reducer 함수
    creatBoard: (state: any, action) => {
      // 새로운 게시판을 추가하고 boardId 자동 생성하고 i
      //ndex 번호를 id값으로 추가
      const newBoard = { id: state.boards.length };
      //상태의 boards에 값 추가
      state.boards.push(newBoard);

      // 선택된 boardId 설정
      state.selectedBoardId = newBoard.id;
     
    },
    //보드 선택 하기
    selectBoard: (state: any, action) => {
      state.selectedBoardId = action.payload;
    },
    //보드 삭제
    deleteBoard: (state, action) => {
      //선택한 값 전달 받음
      const { boardId } = action.payload;
      // 전달 받은 id값 삭제
      delete state.boards[boardId];
      //초기화
      state.selectedBoardId = null;
    },
  },
});

export const { creatBoard, selectBoard, deleteBoard } = boardSlice.actions;

export default boardSlice.reducer;

학습

creatBoard: (state: any, action) => {}

• 액션 타입 및 데이터는 액션 객체 내에 type 및 payload와 같은 필드로 포함
• 파라미터 state : Redux 스토어의 상태(state)현재 상태를 의미
• 파라미터 action : 디스패치된 액션 객체

const { boardId:boardId } = action.payload;

• 객체 구조 분해를 사용하여 해당 프로퍼티의 값을 변수 boardId에 할당

  dispatch(deleteBoard({ boardId: 123 }))
  -여기서 { boardId: 123 }는 action.payload 객체가 되며, boardId 프로퍼티는 해당 객체 내부의 프로퍼티 중 하나로 전달
  -코드에서 const { boardId } = action.payload;를 사용하여 이 값을 추출하고 변수 boardId에 할당

export const { creatBoard } = boardSlice.actions;

• Redux Toolkit에서 생성한 boardSlice에서 액션 생성자 함수인
  createBoard를 가져와서 내보내는 코드
• 다른 파일에서 createBoard 함수를 불러와서 Redux 스토어에
  해당 액션을 디스패치(dispatch)할 수 있다