Redux 작성 패턴_posted by 22-09-08

Soye Park·2022년 11월 1일
0

깃헙블로그백업

목록 보기
8/10
post-thumbnail

본 포스팅은 깃헙 블로그 사용 당시 작성한 포스팅입니다.

Redux의 작성 패턴

리덕스를 작성할 때 redux 폴더를 생성하고 constants, actions, reducers, store 폴더를 모두 따로 만들어 관리하는 패턴이다. 공식 문서에서 리덕스 사용 설명을 위해 제공되는 예시가 이와 같이 작성되어있다.

위와 같이 redux라는 상위폴더 안에 각 요소들을 모아둔 폴더를 각각 따로 만들어 관리하게 된다.


덕스(Ducks) 패턴

덕스 패턴은 위의 방식과는 달리 module화 시켜 보관한다. 예를들어 counter app을 만들기 위해 counter.js 를 만든다면 modules 폴더를 만들어 counter.js 내부에 constant, action, reducer 를 모두 작성해 보관한다. 이 때 store만 index.js 파일을 만들어 따로 보관한다.

덕스 패턴 작성 시 주의할 점

  1. 덕스 패턴 작성은 constant, action, reducer 순으로 작성해 관리한다.
  2. constant(액션타입) 의 경우 다른 모듈과 이름이 겹칠 수 있으므로 반드시 접두사를 붙여 관리한다.
1
2
const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";
  1. 익스포트 규칙
    1. constants는 export하지 않는다
    2. action은 named export를 사용해 export한다.
    3. reducer는 default export를 사용해 export한다.

덕스 패턴 코드 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

export function Increase(diff) {
return {
type: INCREASE,
payload: { diff },
};
}

export function Decrease(diff) {
return {
type: DECREASE,
payload: { diff },
};
}

const initialState = { number: 0 };

export default function counter(state = initialState, action) {
switch (action.type) {
case INCREASE:
return { number: state.number + action.payload.diff };
case DECREASE:
return { number: state.number - action.payload.diff };
default:
return state;
}
}

profile
응애FE개발자/ 블로그 이전 : https://soyeah-log.vercel.app/

0개의 댓글