redux와 reducer/dispatch 개념 이해하기

react강의 중에서 중요한 개념이라고 생각해서 포스팅하려 합니다.

 

먼저, redux를 쓰는 첫 번째 이유는 props 없이 모든 컴포넌트가 같은 state를 공유할 수 있게 해 줍니다.

상위 컴포넌트에서 깊은 곳에 위치한 하위 컴포넌트까지 props를 전달하는 것은 여간 귀찮은 일입니다. 하지만 redux를 활용한다면 복잡한 props 전송이 필요 없이 바로 정의한 state를 쓸 수 있습니다. 

 

강의에서는 장바구니 페이지를 redux 활용하여 쉽게 구현했습니다. 그전에 redux관련 라이브러리를 설치합니다.

 

[redux 라이브러리 설치]

yarn add redux react-redux

yarn이 설치되어있지 않다면 아래의 명령어로 설치하면 됩니다.

npm install redux react-redux

 

 

설치가 완료되었다면 4 step의 세팅 과정이 있습니다.

---

[세팅 과정]

1. index.js에서 <Provider> import

 

2. state값 공유를 원하는 컴포넌트를 감싼다. (40줄, 42줄)

 

3. createStore를 import해온 뒤에 createStore(콜백 함수) 형태로 변수에 담습니다. 

 

4. 마지막으로 <Provider>에 state를 props처럼 등록합니다. (39줄)

 

세팅이 끝났다면 App이라는 컴포넌트 안에 포함된 컴포넌트 모두 store라는 state를 어디서든 쓸 수 있게 됩니다.

---

[컴포넌트에서 store에 담은 state 사용하는 과정]

1. 이제 cart.js 에서 function() 안에서 state를 받아 props로 등록합니다.

2. 하단에 export default connect(작명)(Cart)까지 작성하면 store변수에 담은 state를 등록되며 props.state 이름으로 해당 컴포넌트에서 사용할 수 있습니다.

---

이어서 reducer/dispatch 문법으로 데이터를 수정하는 법을 작성하려 합니다.

장바구니에 수량을 변경할 수 있는 +,- 버튼을 추가했습니다. 

+버튼을 누르면 수량이 증가하고, -버튼을 누르면 수량이 감소하는 부분을 구현하려 합니다.

 

[reducer]

index.js에서 createStore의 부분이 많이 변경된 것을 확인할 수 있습니다. 

먼저 reducer라는 함수를 만들어 매개변수로 초기 state와 액션 인자를 받습니다.

34줄에서 createStore(콜백 함수) 안에 reducer를 담습니다.

액션. type이 '수량 증가' 인경 우와 '수량감소'인 경우를 조건문으로 나누어 구현합니다.

이렇게 state데이터의 수정 방법을 reducer로 미리 정의를 해야 합니다.

 

[dispatch]

이제 cart.js에서 버튼에 해당하는 부분에서 dispath로 미리 정의해둔 수정 방법을 적용하기 위해 type에 원하는 값을 넣어주면 됩니다.