Redux에서 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++
    }
  }
})

• 기능

  1. addCount(0) 하면 0번째 상품 +1
  2. addCount(1) 하면 1번째 상품 +1
  3. export 하고 필요할 때 쓰자.

저렇게 해도 좋지만 나중에 정렬같은 기능을 만든뒤에 하면 조금 이상할 것 같다.
그래서 정확하게 하기 위해 버튼 누르면 상품의 id값을 받아와 그 id의 상품을 +1 해주는 것이 정확할 것 같다.

dispatch(addCount(i)
↓
dispatch(addCount(state.cart[i].id))

해준다면 그 상품의 id를 가져와 줄 것이다.

고로 바뀐 코드는

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

그렇게 한 뒤에 redux를 사용할 js 에서

(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(state.cart[i].id)) 
          }}>+</button>
        </td>
      </tr>
     )
   }
</tbody> 

해주면 동작이 아주 잘 될 것 같다.

※findIndex()란

array 뒤에 붙일 수 있는 함수

• 안에 콜백함수 넣고 return 뒤에 조건식 넣기
• a라는 파라미터는 array안에 있던 자료들
• array에 있던 자료를 확인하는데 조건식에 맞는 자료를 뱉어낸다.
• 위 코드는 a.id와 payload가 같으면 몇번째 자료인지 변수에 저장하라는 뜻

주문버튼 누르면 state에 새로운 상품 추가

대충 똑같이 reducers 안에다가

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 번호 = state.findIndex((a)=>{
        return a.id ===action.payload
        state[번호].count++
      }    
   },
   addItem(state,action){
     state.push(action.payload)
   }
  }
})

이렇게 하고

dispatch(addItem({id :1, name: 'red knit', count: 1}))

를 가져다가 쓰면 잘 늘어날 것 같다.