안녕하세요!! 오늘은 며칠동안 머리를 아프게 했던 베이직반 과제를 끝내고 제출을 완료했습니다!
완벽한 코드는 아니지만 그래도 주어진 기능은 모두 구현해서 뿌듯합니다 ㅎ
몇 시간 동안 저를 괴롭혔던 코드에 대해 소개드리면서 해결하는 방법까지 소개 시켜드리도록 하겠습니다!
어떤 코드였나면요...
const cartProducts = createSlice({
name: "장바구니상품들",
initialState: [],
reducers: {
addToCart: (state, action) => {
state.push(action.payload);
},
removeCart: (state, action) => {
const productIdToRemove = action.payload.id;
console.log("Removing from cart", productIdToRemove);
return state.filter((상품) => 상품.id !== productIdToRemove);
},
},
});위의 코드와 아래의 코드인데요
const removeAdd = createSlice((
name: '장바구니삭제',
initialState: [],
reducer: {
count증가: (state, action) => {
return state.map((상품) => {
if (상품.id === action.payload.id) {
return { ...상품, quantity: 상품.quantity + 1 };
}
return 상품;
});
},
}
))막연한 저의 생각으로는 당연히 createSlice를 나눠야한다고 생각해서 아래의 코드처럼 나눠서 작성을 했는데 이 코드가 같은 reducer 안에 있어야한다고 하더라구요...?
지금은 제가 한 코드는 방을 나눠주고 A라는 방에 작동을 해야되는데 B라는 방에서 A라는 방에 작동을 하라고 계속 주문을 하는 것과 같다고 합니다...
결론적으로 101호에서 102호한테 계속 말로 소리치면서 부탁을 하는거죠...
그니깐 정말 의미가 없었던거죠..
그래서 위와 같이 나눠서 코드를 작성하면 안되고
const cartProducts = createSlice({
name: "장바구니상품들",
initialState: [],
reducers: {
addToCart: (state, action) => {
state.push(action.payload);
},
removeCart: (state, action) => {
const productIdToRemove = action.payload.id;
console.log("Removing from cart", productIdToRemove);
return state.filter((상품) => 상품.id !== productIdToRemove);
},
count증가: (state, action) => {
return state.map((상품) => {
if (상품.id === action.payload.id) {
return { ...상품, quantity: 상품.quantity + 1 };
}
return 상품;
});
},
count감소: (state, action) => {
return state.map((상품) => {
if (상품.id === action.payload.id) {
if (상품.quantity > 1) {
return { ...상품, quantity: 상품.quantity - 1 };
}
}
return 상품;
});
},
},
});위와 같이 하나의 reducers안에 모든 것을 넣어야됩니다..!
그리고 아래에
export const { addToCart, removeCart, count증가, count감소 } =
cartProducts.actions;export를 해서 해당 코드를 뽑아서 사용하면 될 것 같습니다!
혹시 저 처럼 reducers에 코드를 잘 적었지만 작동이 안되는 경우가 있게 된다면 혹시 자신이 reducers 경로를 잘 못 적었는지 확인 해보시면 좋을 것 같습니다!
네 오늘은 reducers를 한 번에 적어야하는 방향에 대해 알아보았습니다저도 이거를 튜터님께 배운 방법인데 어떻게 벨로그에 설명을 적어야될지 몰라서 설명이 너무 약했습니다...
제가 프로젝트와 과제들을 더 진행하면서 이런 문제가 또 발생했을 때 예전 포스팅 처럼 쉽고 꼼꼼히 설명드릴 수 있도록 더 노력하겠습니다!!
네! 그러면 오늘 저의 포스팅은 여기까지이며
여러분들 오늘도 고생하셨고 또 빠이팅입니다!!
그리고 우리는 또 행복하자구요!!
