Redux-toolkit : 장바구니 기능 관련 응용문제

실력향상 응용문제들 :

응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면?

응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만?

 

응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면?

 

(Cart.js)

<Table>
  <thead >
    <tr>
      <th>#</th>
      <th>상품명</th>
      <th>수량</th>
      <th>변경하기</th>
      <th>삭제하기</th>
    </tr>
  </thead>
  {/*데이터 갯수에 맞게 표 생성해달라고 반복문쓰는 것도 좋을듯요*/}
  {/*map으로 html 생성할때 일단 {}부터 쓴다 */}
  {
  carts.map((item,i)=>{
    return (
    <tbody key={i}>
    <tr>
      <td>{carts[i].id}</td>
      <td>{carts[i].name}</td>
      <td>{carts[i].count}</td>
      <td>
        <button onClick={()=>{
          dispatch((changeCount(carts[i].id)))
        }}>➕</button>
      </td>
      <td>
        {/*버튼을 누르면 상품이 삭제되게 하려면 */}
        <button onClick={()=>{dispatch(removeItem(i))}}>❌</button>
      </td>
    </tr>
  </tbody>
    )
   })
}
</Table>

(store.js)

let carts = createSlice({
  name: 'carts',
  initialState:
  [
    {id : 0, name : 'Red Knit', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1},
    {id : 3, name : 'Rockey', count : 1}
  ],
  
  reducers:{
    changeCount(state,action){
      //action.payload와 state의 id가 같은 인덱스만 찾는다
      let idIndex = state.findIndex((item)=>{return item.id === action.payload})
      state[idIndex].count += 1
     },
     addItem(state,action){
      return item.id == action.payload.id})
      if(idIndex2 === -1){
      state.push(action.payload)
      }else{
      state[idIndex2].count += 1 
      }
    },
     removeItem(state,action){
     state.splice(action.payload, 1)
     }
  }
})
export let {changeCount, addItem,removeItem} = carts.actions

버튼을 누르면, 상품이 삭제되게 해야 한다.

그럼 n번째 버튼을 누르면, 기존 state에서  n번째 요소가 사라지게 만들어야 함

 

변경함수 removeItem 안에 state를 splice를 사용해서 변경해준다

array.splice(i, 1)은 array 배열에서 인덱스 i에 위치한 요소를 1개 삭제하는 것을 의미합니다.
splice() 메소드에서 첫 번째 매개변수 start는 시작 위치를 나타내므로, i는 삭제를 시작할 인덱스입니다. 

두 번째 매개변수 deleteCount는 삭제할 요소의 수를 나타내므로, 1을 전달하면 array 배열에서 해당 인덱스의 요소 1개가 삭제됩니다.

 

 

 

 

응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만?

(Detail.js)

function Detail(){
//생략
return(
<div className="row">
          <div className="col-md-6">
            <img src={"https://codingapple1.github.io/shop/shoes"+(Number(id)+1)+".jpg"} width="100%" />
          </div>
          <div className="col-md-6">
            <h4 className="pt-5">{찾은상품.title}</h4>
            <p>{찾은상품.content}</p>
            <p>{찾은상품.price}원</p>
            <button onClick={()=>{dispatch(addItem({id : 1, name : 'White and Black', count : 1}))}}className="btn btn-danger">주문하기</button> 
          </div>
</div>
)
}

(store.js)

let carts = createSlice({
  name: 'carts',
  initialState:
  [
    {id : 0, name : 'Red Knit', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1},
    {id : 3, name : 'Rockey', count : 1}
  ],
  reducers:{
    changeCount(state,action){
      //action.payload와 state의 id가 같은 인덱스만 찾는다
      let idIndex = state.findIndex((item)=>{return item.id === action.payload})
      state[idIndex].count += 1
     },
     addItem(state,action){
      let idIndex2 = state.findIndex((item)=>{
      return item.id == action.payload.id})
      if(idIndex2 === -1){
      state.push(action.payload)
      }else{
      state[idIndex2].count += 1 
      }
    },
     removeItem(state,action){
     state.splice(action.payload, 1)
     }
  }
})
export let {changeCount, addItem,removeItem} = carts.actions

 

{dispatch(addItem({id : 1, name : 'White and Black', count : 1}))}

변경함수 addItem 안에 추가될 데이터를 넣어준다

 

이때, 변경함수 addItem에 조건문을 짜야한다

만약 기존 state에 추가될 상품과 같은 상품이 있다면, 수량만 +1 해주고,

그렇지 않다면 그대로 state에 추가시킨다.

 

findIndex() 메소드를 사용해서 action.payload.id(추가된 데이터의 id) 와 item.id( state array 안에 있는 요소의 id)

 가 같은지 확인함

 findIndex() 메소드는 배열에서 주어진 함수에 대해 처음으로 참 값을 반환하는 요소의 인덱스를 반환합니다. (ex.0,1,2,3,..)
 만약 참 값을 반환하는 요소가 없으면 -1을 반환합니다.

 

idlndex2가 -1이라면, state.push(action.payload)로 새로 데이터를 추가하고,

그렇지 않다면 id가 동일한 state의 인덱스를 찾아서 state[idlndex2].count += 1 해준다