[Redux toolkit] object자료형 중 원하는 데이터 찾기

Redux toolkit으로 저장한 object형 데이터가 많아졌을때 그 중 원하는 데이터만 찾아 수정하는 로직을 학습했다.
이 부분은 Redux toolkit의 문법보다는 js기본 문법 사용법에 더 가깝다.

store.js

const cart = createSlice({
  name: "cart",
  initialState: [
    { id: 0, name: "kim", count: 2 },
    { id: 2, name: "park", count: 1 },
  ],
  reducers: {
    countItem(state, action) {
      state[].count += 1;
    },
    
  },
});

우선 countItem 이라는 함수명을 짓고 state.count += 1을 해줬다. 여기서 생각해야될 부분은 이 함수를 사용될 버튼의 데이터 id와 같은 id값의 count를 올려줘야 한다.

Detail.js

{state.cart.map((el, idx) => (
  <tr>
    <td>{state.cart[idx].id}</td>
    <td>{state.cart[idx].name}</td>
    <td>{state.cart[idx].count}</td>
    <td>
      <button
        onClick={() => {
          dispatch(countItem(el.id));
        }}
      >
        +
      </button>
    </td>
  </tr>
))}

함수를 사용하고자 하는 컴포넌트를 살펴봤을때 props로 state.cart[idx].id값을 내려줘 비교하였다. map()함수의 매개변수의 값이 state.cart[idx]이기 때문에 el.id를 내려줬다.

const cart = createSlice({
  name: "cart",
  initialState: [
    { id: 0, name: "kim", count: 2 },
    { id: 2, name: "park", count: 1 },
  ],
  reducers: {
    countItem(state, action) {
      let find = state.findIndex((el) => el.id === action.payload);
      state[find].count += 1;
    },
    
  },
});

findIndex메서드는 array 혹은 object 자료형에서 원하는 값이 있는 첫번째 인덱스 값을 반환 해준다. 현재 el.id의 값은 initialState의 id 값인 0, 2 이고 action.payload에는 props로 내려준 버튼을 클릭 했을때 자료의 id값이 내려온다. 이 둘을 비교해서 같은 부분의 index 값을 반환 해준다. 그 값을 변수 find에 할당하고 +1을 해야하는 state의 index값으로 사용하면 버튼을 클릭 했을때와 같은 id값을 가지는 데이터의 count값을 올려줄 수 있다.