[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[3]

 

1. 리덕스 작성 방법

 

이제 프로젝트에 리덕스를 적용해 볼 시간입니다.

 

리덕스를 사용하기 위해서는

 

• 액션 타입
• 액션 생성 함수
• 리듀서 

3개의 코드가 필요합니다.

 

 

 

 

일반적인 구조

리덕스의 가장 일반적인 구조가 위와 같습니다.

 

세개의 디렉토리를 만들고 그에 따른 파일을 별도로 만들어주는 방식입니다.

 

장점 : 코드를 파일 종류에 따라 분리할 수 있고 정리하기에 용이합니다.

단점 : 새로운 액션을 만들 때마다 3개의 파일을 모두 생성해줘야 하고 수정도 3번 해야합니다.

 

 

 

2번쨰는 액션 타입, 액션 생성 함수, 리듀서  3개의 코드를 기능별로 하나에 파일에 작성하는 방법입니다.

이러한 패턴을 Ducks 패턴이라고 부르고 위의 구조에 불편함을 느낀 개발자들이 이러한 방법을 사용합니다.

 

 

장점 : 기능별로 하나의 파일만 수정할 수 있고 파일 개수가 줄어듭니다.

단점 : 코드가 분리되지 않아서 처음 구조를 분석할 때는 불편할수도 있을 것 같습니다(필자 생각)

 

여기서는 Ducks 패턴으로 개발을 진행합니다.

 

 

 

2. counter 모듈 작성

 

ducks 패턴으로 작성한 액션 타입, 액션 생성 함수, 리듀서  코드를 "모듈"이라고 합니다.

 

2.1 액션 타입 정의하기

 

- modules/counter.js

 

// 액션의 타입 정의
const INCREASE = 'counter/INCREASE';
const DECREASE = "counter/DECREASE";

 

2.2 액션 생성 함수 생성 

 

- modules/counter.js

 

// 액션의 타입 정의
const INCREASE = 'counter/INCREASE';
const DECREASE = "counter/DECREASE";

// 액션 생성함수 생성
export const increase = () => ({ type : INCREASE });
export const decrease = () => ({ type : DECREASE });

 

2.3 초기 상태/리듀서 함수 생성 

 

- modules/counter.js

 

// 액션의 타입 정의
const INCREASE = 'counter/INCREASE';
const DECREASE = "counter/DECREASE";

// 액션 생성함수 생성
export const increase = () => ({ type : INCREASE });
export const decrease = () => ({ type : DECREASE });

// 초기값 설정
const initialState = {
    number: 0
}

// 리듀서 함수정의
function counter(state = initialState, action) {
    switch (action.type) {
        case INCREASE:
            return {
            number: state.number + 1,
            };
        case DECREASE:
            return {
            number: state.number - 1,
            };
        default:
            return state;
    }
}

export default counter;