Typescript

typescript redux toolkit 객체 타입 주기

hovinee 2022. 11. 4. 12:50
import { createSlice } from "@reduxjs/toolkit"; //작은 slice 를 모아서 store를 만들때는
import type { PayloadAction } from "@reduxjs/toolkit";

interface WearclothesProps {
  Cap?: {
    CapClothes: string;
    index: number;
  };
  Top?: {
    TopClothes: string;
    index: number;
  };
  Pant?: {
    PantClothes: string;
    index: number;
  };
  Outer?: {
    OuterClothes: string;
    index: number;
  };
  Dress?: {
    DressClothes: string;
    index: number;
  };
  Shoes?: {
    ShoesClothes: string;
    index: number;
  };
}
export interface ProductState {
  value: boolean;
  brandname: string;
  clothestap: string;

  productdetail: boolean;
  wearclothes: WearclothesProps;
}

const initialState: ProductState = {
  value: false,
  brandname: "",
  clothestap: "ALL",

  productdetail: false,
  wearclothes: {
    Cap: {
      CapClothes: "",
      index: 0,
    },
    Top: {
      TopClothes: "",
      index: 0,
    },
    Pant: {
      PantClothes: "",
      index: 0,
    },
    Outer: {
      OuterClothes: "",
      index: 0,
    },
    Dress: {
      DressClothes: "",
      index: 0,
    },
    Shoes: {
      ShoesClothes: "",
      index: 0,
    },
  },
};
const productSlice = createSlice({
  //Slice 는 작은 store라고 생각하면 됨
  name: "product", //이름정하기
  initialState, //초기값 지정
  reducers: {
    productTrue: (state) => {
      state.value = true;
    },
    productFalse: (state) => {
      state.value = false;
    },
    productModal: (state, action: PayloadAction<boolean>) => {
      state.value = !action.payload;
    },
    brandname: (state, action: PayloadAction<string>) => {
      state.brandname = action.payload;
    },
    clothestap: (state, action: PayloadAction<string>) => {
      state.clothestap = action.payload;
    },

    productdetail: (state, action: PayloadAction<boolean>) => {
      state.productdetail = action.payload;
    },
    wearclothes: (state, action: PayloadAction<WearclothesProps>) => {
      state.wearclothes = { ...state.wearclothes, ...action.payload };

    },
  },
});

export const {
  productModal,
  productTrue,
  productFalse,
  brandname,
  clothestap,
  wearclothes,

  productdetail,
} = productSlice.actions;

export default productSlice.reducer;

원하는 객체를 담아주고 객체 스프레드 형식으로 추가추가~