[17장] 리덕스 활용(1)

1. 패턴
리액트 프로젝트에서 리덕스 사용시 가장 많이 사용하는 패턴은 아래와 같이 분리하는 패턴이다.

 

• 프레젠테이셔널 컴포넌트 : 상태 관리가 이루어지지 않고, props만 받아서 UI표출에 주력하는 컴포넌트
• 컨테이너 컴포넌트 : 리덕스와 연동되어 상태를 받아오고 스토어에 액션을 디스패치하는 컴포넌트

즉, 프레젠테이셔널 컴포넌트는 화면만 보여주는 빈 껍데기같은 놈이고 실제로 필요한 정보는 리덕스 스토어에 다 짱박아둔다. 그리고 컨테이너 컴포넌트가 스토어와 상호작용하면서 필요한 데이터를 끄집어낸 뒤 프레젠테이셔널 컴포넌트에게 전달해주는 방식이다.

여하튼 이 패턴이 필수라고 말할 순 없지만, 관심사 분리로 코드 재사용성과 UI 작성에 도움이 되기 때문에 권장한다.

2. UI 준비

아주아주 간단한 페이지를 만들어보자. 사실 규모가 작은 프로젝트에 리덕스를 쓰면 오히려 코드가 복잡해져서 안쓰느니만 못한데 어쨌든 배우긴 해야되니까;;

3. 리덕스 관련 코드 작성

리덕스 관련 코드를 준비할건데 기본적으로 액션 타입, 액션 생성 함수, 리듀서 코드 작성이 필요하다. 작성에 앞서 보통 파일 구조를 두 가지 방법중 하나를 고르는데, 여기선 Ducks패턴을 사용해보자. 밑에서부턴 코드만 줄줄이 나열돼있어서 노잼이겠지만 천천히 읽어보길 바란다.

3.1 Counter.js
1) 액션 타입 선언하기

2) 액션 생성 함수 정의하기

3) 리듀서 함수 정의하기

3.2 todos.js
1) 액션 타입 정의하기

2) 액션 생성 함수 정의하기

3) 리듀서 함수 정의하기

4) 루트 리듀서 만들기 (리듀서 합치기)
각 모듈에 맞게 리듀서가 여러개 만들어졌는데 결국 스토어를 쓸 땐 리듀서를 하나만 사용해야 한다. 따라서 이전에 만들어뒀던 리듀서를 하나로 합쳐야하는데, 다행히 리덕스에서 combineReducers라는 유틸 함수로 쉽게 처리할 수 있다.