[React] Redux 문제 1. object 데이터를 버튼 클릭 시 1씩 증가하기

let num = state.findIndex((a)=>{return a.id === action.payload})
      state[num].count++;

데이터 출처 : 코딩애플 강의

• store.js

let user_cart = createSlice({
  name  : 'user_cart',
  initialState : [  
  {id : 1, name : 'White and Black', count : 2},
  {id : 2, name : 'Grey Yordan', count : 1}
],

reducers : {
  changecount (state,i) {
      //i값을 가져와서 출력하니깐 { } 형식으로 나와서 꺼내서 사용함
      let conunt_number = i.payload;
      //state함수로 count값을 수정 
      state[conunt_number].count+=1;
  }

  }
})

export let{ changecount }  = user_cart.actions

 

• Cart.js

 <td><button onClick={ ()=>{ dispatch( changecount(i))}}>+</button></td>

 

강의를 듣기 전에 선행으로 혼자 문제를 푸는데 return 문 옆에 두면 수정된다는 생각에 

꼭 이걸 return 해야겠다는 이상한 생각에 잡혀서 불 필요한 시간을 조금 썼다.

 

console.log로 전송되는 데이터를 보니 payload라는 것으로 감싸져 있었다. 

그래서 payload를 풀었더니 정상적으로 i값을 가져와서 사용할 수 있었다. 

 

추가로 궁금해서 인자를 여러개 전달했더니 정의되지 않은 값으로 나왔다.

Redux 수정 함수에서는 인자를 한개만 전달할 수 있는데

만일 여러개 값을 전달하고 싶다면 Array/Object 타입으로 작성해서 전달하면 될 것 같다.

 

object / array 는 return 하지 않아도 내부 데이터 수정이 가능하다.  

 

추가로 함수를 선언 할 때

Uncaught-ReferenceError-Cannot-access-close-before-initializationat 란 오류가 나왔는데

수정을 위해 만든 함수 보다 export 를 위에 선언했으니 변수 참조가 제대로 이뤄질 일이 없었다.

 

아래에 적어주면 해결가능한 문제이다. 

 

 

id값을 비교해서 추가하고 싶은 경우에는 findIndex를 사용하거나 인자로가져온 id값과 state id값을 if문으로 비교한다.

let num = state.findIndex((a)=>{return a.id === action.payload})
state[num].count++;