[React] Redux store에서 state 변경해보기

진행중인 프로젝트의 장바구니 페이지에서 수량 증가 감소 버튼으로 수량을 변경해보겠음.

일단 수량은 store.js의 items 슬라이스에 있으니 items 슬라이스에서 리듀서 함수(state 변경 함수)를 작성해보자.

 

먼저 store에서 리듀서 함수를 만들자.

플러스 버튼을 눌렀을 때 수량이 증가할 countUp이라는 함수와

마이너스 버튼을 눌렀을 때 수량이 감소할 countDown이라는 함수를 만들어주겠음.

countUp, countDown 함수 모두 공통적으로 버튼을 클릭한 배열의 요소에 접근해야하니 state와 action 두 매개변수를 사용하고,

index에 접근하기 위해 action.payload를 사용하여 변수를 만들어준다.

 

countUp 함수는 수량이 증가하는 것이므로 수량이 음수값을 가질 일 이 없으니

if 조건문으로 state[index]가 있을 시에 숫자가 1씩 증가하도록 += 연산자를 사용해 코드를 작성했고,

 

countDown 함수는 수량이 1씩 감소하는 것이므로 음수값을 가지는 것을 방지하기 위해

if 조건문에 &&연산자로 state[index]가 있고 그리고 state[index].count가 0보다 클 경우에만 -1 하도록 작성했다.

아마 코드를 더 깔끔하게 짜는 방법이 있을거같은데 그건 한번 찾아보고 추가하도록 하겠음.

 

 

이제 장바구니 페이지에서 수량 옆에 -, + 버튼을 만들어주겠음

-, + 버튼 만들기

 

이제 각 버튼에 onClick 속성으로 state 변경 함수를 호출하도록 하면 될 것이다.

먼저 dispatch()함수를 사용해서 호출해보자.

state 배열의 요소에 접근하기 위해 i를 넘겨준다.

 

이렇게 dispatch 함수를 사용하여 store.js파일의 리듀서 함수를 호출하면

state 변경이 잘 될것이다.

수량 증가 잘 되고, 수량 감소도 0까지 잘 된다.

 

장바구니 수량 증가 감소 버튼 만들기 끝!

 

 

 

 

 

 

 

추가사항)

리듀서 함수를 리팩토링 해보겠음.

 

먼저 updateCount라는 헬퍼 함수를 만들겠음.

updateCount 헬퍼 함수

 

이 헬퍼함수는 state, index, delta를 인자로 받아 count를 업데이트한다.

delta가 1이면 count를 증가시키고, -1이면 count를 감소시킨다.

그리고 if 조건문으로 count가 음수가 되지 않도록 해준다.

 

그리고 리듀서 함수에서 updateCount 함수를 호출해서 사용하면 될 것이다.

updateCount 함수 호출

 

이렇게 사용하면 조금 더 좋은 코드가 될 것이다.