React, 장바구니 기능 , 물량 추가버튼

위와 같은 수량변경 버튼을 눌렀을때 옆에있는 상품 id를 가져와서
이것과 똑같은 id를 가진 상품을 state에서 찾아 그것을 +1 해주는 기능을 만들어보자

1. 먼저 state를 +1 해주는 수정함수를 만든다.

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount(state, action){
      state[action.payload].count++
    }
  }
}) 

그런데 이때 물건을 제배열하게되었을때 count의 값에 오류가 생길수도 있기 때문에 버튼을 누른 상품의 id를 가져와 이것과 같은 id상품을 state에서 찾아주도록 하자.

순서는 아래와 같다.

1. cart.js에서 0번째 버튼을 눌렀을때.
2. 그 오브젝트의 id 0를 store.js payload 의 0으로 전송한다.
3. store.js 에서 전송되어온 0이 array 안의 id가 같은지 확인한다.
4. 같으면 같은 데이터가 몇번째 항목에 있는지 값을 남겨준다.
5. 그 값을 ++ 한다.

store.js

let cart = createSlice({
name: "cart",
initialState: [
  { id: 0, name: "HAIR", count: 1, price: "44000" },
  { id: 2, name: "BODY", count: 1, price: "32000" },
],

reducers: {
  addCount(state, action) {
  
  	// a 파라미터 : array안에 있는(state) 하나하나의 데이터 의미 즉, 오브젝트 하나 {}
    let num = state.findIndex((a) => {
      return a.id === action.payload;
    });
          
    state[num].count++;
  },
},
});

export let { addCount } = cart.actions;

---

Cart.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(addCount(i)) }}>+</button>
        </td>
      </tr>
     )
   }
</tbody>