[React-Redux] ducks pattern

Ducks: Redux Reducer Bundles

Redux를 사용하여 상태관리를 구축하는 과정에서 하나의 기능을 만들 떄 각각 use case에 따라 type, action, reducer를 계속 추가해야 된다는 점과 reducer와 actions만 서로 연관된 동작을 하므로 하나의 독립된 모듈로 묶는것이 더 의미가 있고 라이브러리로 packaging하기 더 쉽다고 한다.

 

규칙

1. 하나의 모듈은 항상 reducer 함수를 default로 export해야 한다.

2. action 생성자를 함수로 export해야 한다.

3. action 타입은 npm-module-or-app/reducer

4. 외부 reducer가 해당 action들의 발생을 계속 기다리거나, 재사용이 가능한 라이브러리일 경우 "UPPER_SNAKE_CASE"로 export 할 수 있다.

 

typescript,  redux-action라이브러리를 사용한 작성한 간단한 integer 증감 상태 관리 모듈이다.

import { handleActions, createAction } from 'redux-actions';

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';
const INCREASE_BY = 'counter/INCREASE_BY';

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);
export const increase_by = createAction<number>(INCREASE_BY);

type CounterAction = 
    ReturnType<typeof increase> |
    ReturnType<typeof decrease> |
    ReturnType<typeof increase_by>;

export interface CounterState{
    count: number;
}
export const initialCounterState: CounterState = {
    count: 0
}

export default handleActions<CounterState, CounterAction>({
    [INCREASE]: (state: CounterState) => ({
        ...state,
        count: state.count + 1
    }),
    [DECREASE]: (state: CounterState) => ({
        ...state,
        count: state.count - 1
    }),
    [INCREASE_BY]: (state: CounterState, action: CounterAction) => ({
        ...state,
        count: state.count + action.payload
    })
}, initialCounterState);

 

https://github.com/JisuPark/ducks-modular-redux

JisuPark/ducks-modular-redux