[React] Redux 응용

state 를 수정해주는 함수를 만들어봤다.

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){
      let item = state.findIndex((a)=>{ return a.id === action.payload })
      state[item].count++
    }
  }
})

저 action.payload에는 파라미터가 들어가는 방식이다.

저 cart의 데이터와 비교해서 파라미터로 받은 id과 같은걸 findIndex로 찾도록 했다.

...


        <td>
          <button onClick={()=>{ dispatch(addCount(state.cart[i].id))  }}>+</button>
        </td>
     

...

그 해당하는 상품의 id를 가지고, 그 상품의 수량을 1 증가시키도록 했다.

---

state를 추가하는 함수를 작성해봤다.

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++
    },
    addItem(state, action){
      state.push(action.payload)
    }
  }
})

저렇게 addItem이라는 함수를 작성했는데

저 action.payload 자리에는 추가될 데이터가 있어야 한다.

<button className="btn btn-danger" onClick={()=>{
    dispatch(addItem( {id : 1, name : 'Red Knit', count : 1} ))
  }}>주문하기</button>

이런식으로 하드코딩하긴 했는데 

나중에 정말 실전 프로젝트에서 쓴다면 그 해당 상세페이지에 해당하는 상품이 추가되도록 해야하겠지.