S3-반딧불반

과제 - Redux 실습을 다시 풀어보고, 해당 실습에서 Redux의 구성 요소가 어떤 순서로 작동하는지 의사코드를 작성하세요.

Cmarket Redux

• Cmarket Shopping App은 Create React App으로 만든 React 애플리케이션에 Redux를 붙인 구조다.

• 아이템 리스트 페이지(ItemListContainer)와 장바구니 페이지(ShoppingCart) 총 두 페이지로 간단하게 구성된다.

• Store의 initial state에는 전체 아이템 목록(items), 장바구니 목록(cartItems)이 들어있다.

• 각 ItemListContainer, ShoppingCart 페이지 컴포넌트 및 components 폴더의 여러 컴포넌트들에서 Store(state)에 접근.
  (Redux에서 제공하는 hooks, useDispatch, useSelector를 사용.)

---

과정

1. 장바구니에 담기 버튼을 누르면 item.js의 handleClick 실행

<button className="item-button" 
onClick={(e) => handleClick(e, item.id)}>장바구니 담기</button>

2. handleClick 함수는 dispatch를 통해 addToCart를 호출

const handleClick = (item) => {
    if (!cartItems.map((el) => el.itemId).includes(item.id)) {
      dispatch(addToCart(item.id))
      ...

3. 호출된 addToCart는 ADD_TO_CART라는 액션 함수를 호출

export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId
    }
  }
}

4. ADD_TO_CART는 payload 값을 reducers/index.js로 전달한다.

switch (action.type) {
    case ADD_TO_CART:
      return{...state, cartItems: [...state.cartItems, action.payload]}

5. index.js에서 상태와 값들을 rootReducer로 합쳐서 store.js로 전달

const rootReducer = combineReducers({
  itemReducer,
  notificationReducer
});

6. store.js에서 전달받은 값들을 루트 경로로 전달

const store = 
      createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

7. 루트 경로의 index.js에서 전달받은 값을 리렌더링

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);