Conversation
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
정말 고생 많으셨습니다! 👏🏻👏🏻👏🏻
이번 주 워크북을 통해 Redux Toolkit과 Zustand 두 가지 상태관리 라이브러리를 모두 다뤄보았습니다. 앞으로 프로젝트 복잡도나 규모에 따라 적절한 상태관리 도구를 선택할 수 있는 안목을 갖추게 되셨으면 좋겠습니다! 👍🏻👍🏻👍🏻
| const Cart: React.FC = () => { | ||
| const { cartItems, totalAmount, totalQuantity } = useSelector((state: RootState) => state.cart); | ||
| const dispatch = useDispatch<AppDispatch>(); | ||
| const [isModalOpen, setIsModalOpen] = useState(false); |
There was a problem hiding this comment.
현재 미션 2에서 cart.tsx에서 모달 상태를 useState로 관리하고 있는데, 미션 요구사항에 따라 별도의 modalSlice를 생성하여 Redux로 모달 상태를 관리해야 합니다.
redux 폴더에 modalSlice.ts를 추가하고 openModal, closeModal 액션을 구현해보세요!
| cartItems, | ||
| clearCart, | ||
| } = useCartStore(); | ||
| const [isModalOpen, setIsModalOpen] = useState(false); |
There was a problem hiding this comment.
현재 미션 3에서도 모달 상태를 여전히 useState로 관리하고 있는데, Zustand store에 모달 관련 상태와 액션을 추가하면 상태 관리의 일관성을 높일 수 있습니다. isModalOpen, openModal, closeModal 등을 store에 추가해보세요!
| import { configureStore } from '@reduxjs/toolkit'; | ||
| import cartReducer from './cartslice'; | ||
|
|
||
| export const store = configureStore({ | ||
| reducer: { | ||
| cart: cartReducer | ||
| } | ||
| }); | ||
|
|
||
| export type RootState = ReturnType<typeof store.getState>; | ||
| export type AppDispatch = typeof store.dispatch; |
There was a problem hiding this comment.
현재 장바구니 데이터가 새로고침 시 초기화되고 있는데, Redux Toolkit의 redux-persist나 Zustand의 persist 미들웨어를 적용하여, 새로고침 후에도 장바구니 상태가 유지되도록 🚀Challenge 미션에 도전해 보시면 좋겠습니다!
2 participants
📝 미션 번호
9주차 Misson 1,2,3
📋 구현 사항
📎 스크린샷
✅ 체크리스트
🤔 질문 사항