<React> 장바구니기능만들기+ReduxToolkit

🛒 장바구니 수량증가 기능 구현하기

목표: 장바구니page에서 각 제품별 수량증가 버튼을 누르면 해당 제품 수량 증가할 수 있도록 한다

장바구니 수량 상태변화를 위한 함수로 addCount함수를 만들었다
addCount(state,action){state[action.payload].count++}로
값을 주고
장바구니 페이지에서 onClick={()=>{dispatch(addCount(i))}}로 클릭이벤트를 주면 (이때 i는 map을 돌려서 받은 각각의 Index값) 잘 동작한다
하지만 filter나 sort를 잘못해서 상품의 순서가 바뀌게 되면 불상사(?)가 발생된다 따라서 정확성을 위해서는 "더하고 싶은 상품 id를 가져와서 똑같은 id를 가진 상품을 기존state에서 찾아서 +1"하도록 동작시켜야한다

그래서
1. 버튼을 누르면 action.payload값으로 아래의 값을 파라미터로 전송 onClick={()=>{dispatch(addCount(state.cart[i].id))}}

2.payload와 같은 id를 가진 상품을 찾아서 +1
addCount(state,action){ let 번호=state.findIndex((sameId)=>sameId.id==action.payload) state[번호].count++ }

//store.js파일
let cart=createSlice({
  name:"cart",
  initialState:[
    {id:0,name:"비빔면",count:3},
    {id:1,name:"짜장면",count:1},
  ],
  reducers:{
     addCount(state,action){
       let findSameId = state.findIndex((a) => a.id == action.payload);
      state[findSameId].count++;
     }
  }
})
export let {addCount}= cart.actions;

//cart.js(장바구니파일)

function Cart() {
  let state = useSelector((state) => state); 
  let dispatch = useDispatch(); 

  return (
    <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>상품명</th>
            <th>수량</th>
            <th>변경하기</th>
          </tr>
        </thead>
        <tbody>
          {state.cart.map((list, i) => (
            <tr key={i}>
              <td>{state.cartData[i].id}</td>
              <td>{state.cartData[i].name}</td>
              <td>{state.cartData[i].count}</td>
              <td>
                <button onClick={() => {
                   dispatch(addCount(state.cartData[i].id));}}>
                  +
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

export default Cart;

🛒 주문버튼누르면 장바구니에 새로운 상품추가

목표:상세페이지 주문하기 버튼 누르면 장바구니 state에 항목이 추가되도록한다

1. addCart이라는 함수 만들고 기존 state에 push()함수를 통해 새로운 상품 추가

//store.js파일
let cart=createSlice({
  name:"cart",
  initialState:[
    {id:0,name:"비빔면",count:3},
    {id:1,name:"짜장면",count:1},
  ],
  reducers:{
     addCount(state,action){
       let findSameId = state.findIndex((a) => a.id == action.payload);
      state[findSameId].count++;
     },
    addCart(state,action){
	  state.push(action.payload)
    }
  }
})
export let {addCount}= cart.actions;

2. onClick(addCart())를 통해 상세페이지에서 주문버튼을 누르면 addCart()이 실행될 수 있도록한다

//Detail.js(제품상세페이지)
<div className='col-md-6'>
   <h4 className='pt-5'>{goods.title}</h4>
   <p>{goods.content}</p>
   <p>{goods.price}</p>
   <button
     className='btn btn-danger'
     onClick={dispatch(addCart({ id: 3, name: ' 짬뽕', count: 4 }))}>주문하기
   </button>
  </div>
</div>