boardSlice.ts

글쓰기 버튼 누르전

글쓰기 버튼 누른 후

전체코드

//slice 생성
import { createSlice } from "@reduxjs/toolkit";


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

const boardSlice = createSlice({
  name: "board", //슬라이스 이름
  initialState, //초기값
  reducers: {
    //reducer 함수
    creatBoard: (state: any, action) => {

      // 새로운 게시판을 추가하고 boardId 자동 생성
      const newBoard = { id: state.boards.length + 1 };
      state.boards.push(newBoard);

      // 선택된 boardId 설정
      const result = (state.selectedBoardId = newBoard.id); 
      // console.log(result);
    },
  },
});

export const { creatBoard } = boardSlice.actions;

export default boardSlice.reducer;

App.ts에 있는 글쓰기버튼에 있는 creatBoard와 연동되어
board state 생성

학습

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

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

export const { creatBoard } = boardSlice.actions;

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