Immutable.js

• 객체 불변성
• List
• Map

Ducks 파일 구조

개요

• 액션 타입, 액션 생성 함수, 리듀서를 모두 한 파일에서 모듈화하여 관리

// 액션 타입
const CREATE = ‘my-app/todos/CREATE’;
const REMOVE = ‘my-app/todos/REMOVE’;
const TOGGLE = ‘my-app/todos/TOGGLE’;
 
// 액션 생성 함수
export const create = (todo) => ({
  type: CREATE,
  todo,
});
 
export const remove = (id) => ({
  type: REMOVE,
  id
});
 
export const toggle = (id) => ({
  type: TOGGLE,
  id
});
 
const initialState = {
  // 초기 상태...
}
 
// 리듀서
export default function reducer(state = initialState, action) {
  switch (action.type) {
    // 리듀서 관련 코드...
  }
}

• export default를 이용하여 리듀서를 내보내야 합니다.

• export를 이용하여 액션 생성 함수를 내보내야 합니다.

• 액션 타입 이름은 npm-module-or-app/reducer/ACTION_TYPE 형식으로 만들어야 합니다[라이브러리를 만들거나 애플리케이션을 여러 프로젝트로 나눈 것이 아니라면 맨 앞은 생략해도 됩니다(예: counter/INCREMENT)].

• 외부 리듀서에서 모듈의 액션 타입이 필요할 때는 액션 타입을 내보내도 됩니다.

redux-actions

createAction

// 기존 방식
export const increment = (index) => ({
    type: types.INCREMENT,
    index
});
export const decrement = (index) => ({
    type: types.DECREMENT,
    index
});

// redux-actions 방식
export const increment = createAction(types.INCREMENT);
export const decrement = createAction(types.DECREMENT);

// 예시
increment(3);
/* 결과: 
   {
     type: ‘INCREMENT’,
     payload: 3
   }
*/

export const setColor = createAction(types.SET_COLOR);
setColor({index: 5, color: ‘#fff’})
/* 결과:
   {
     type: ‘SET_COLOR’,
     payload: {
       index: 5,
       color: ‘#fff’
     }
   }
*/

// 파라미터 명시
export const setColor = createAction(types.SET_COLOR, ({index, color}) => ({index, color}));

handleActions

첫 번째 파라미터로는 액션에 따라 실행할 함수들을 가진 객체를 넣어 주고, 두 번째 파라미터로는 상태의 기본 값(initialState)을 넣어 준다.

const reducer = handleActions({
  INCREMENT: (state, action) => ({
    counter: state.counter + action.payload
  }),
 
  DECREMENT: (state, action) => ({
    counter: state.counter - action.payload
  })
}, {counter: 0});

실습!

기존 구현한 TodoList 앱에 immutable, redux, redux-actions를 도입하여 리팩토링해보기