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;
원하는 객체를 담아주고 객체 스프레드 형식으로 추가추가~