Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- useRef()
- repeat()
- 3진수
- toUpperCase()
- Math.floor()
- 항해99솔직후기 #항해99장점 #항해99단점 #부트캠프추천
- filter()
- jsx반복문
- isNaN()
- map()
- sort()
- slice()
- getday()
- React
- Math.sqrt()
- Eventlitener
- indexOf()
- useState()
- reat if문
- 소수점 올림내림
- Number()
- 교집합
- setDate
- charAt()
- substring()
- parseInt()
- 차집합
- includes()
- useEffect()
- new Date()
Archives
- Today
- Total
개발자로 전향중
typescript redux toolkit 객체 타입 주기 본문
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;
원하는 객체를 담아주고 객체 스프레드 형식으로 추가추가~
'Typescript' 카테고리의 다른 글
TpyeScript 어노테이션이란? (0) | 2023.03.14 |
---|---|
이틀 고생한 IOS mobileWeb Scroll (0) | 2023.01.19 |
Mbti input radio로 선택지 주고싶을때 (0) | 2022.11.28 |
TypeScript interface 사용법 (0) | 2022.09.01 |
Typescript 기본타입 (0) | 2022.08.24 |