React : 장바구니 제품 수량변경 (map, redux, action, payload)

조건

map으로 data를 불러온 장바구니 테이블에서 수량변경 버튼을 누르면,
array에서 누른 버튼 옆에 있는 상품과 id값이 같은 상품을 찾아서 count값을 1 플러스 연산한다.

---

풀이

component.js

<tbody>
  {
    state.cart.map((a, i)=>
      <tr key={i}>
        <td>{ state.cart[i].id }</td>
        <td>{ state.cart[i].name }</td>
        <td>{ state.cart[i].count }</td>
        <td>
          <button onClick={()=>{ dispatch(changeCount(state.cart[i].id)) }}>➕</button>
        </td>
      </tr>
    )
  }
</tbody>

store.js

let cart = createSlice({
    name : 'cart',
    initialState : [
        {id : 0, name : 'White and Black', count : 2},
        {id : 2, name : 'Grey Yordan', count : 1}
    ] ,
    reducers : {
        changeCount(state, action) {
            const clickedItemId = action.payload;
            const clickedItem = state.find(item => item.id === clickedItemId);
            clickedItem.count += 1;
        }
    }
})

---

더 간단하게

component.js

<tbody>
  {
    state.cart.map((item, index) => 
      <tr key={index}>
        <td>{item.id}</td>
        <td>{item.name}</td>
        <td>{item.count}</td>
        <td>
          <button onClick={() => { dispatch(changeCount(item.id)) }}>➕</button>
        </td>
      </tr>
    )
  }
</tbody>

---

알게 된 점

• store.js 파일에서 changeCount 리듀서의 action.payload 값은 onClick={() => { dispatch(changeCount(item.id)) }}에서 전달된 item.id와 연결된다.
• map으로 데이터 뿌릴 때 state.cart[i].name 말고 map에 매개변수로 전달한 item으로 item.name처럼 쉽게 써도 된다.
• const clickedItem = state.find(item => item.id === clickedItemId);
  이 배열 find 함수에서 item은 find 하려는 배열(state)의 각 요소 객체 전체다.

---

출처 : 코딩애플 https://codingapple.com/