React, Redux-actions 라이브러리

Before - /modules/counter.jsx

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

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

const initialState = {
  // 초기 상태 설정
  number: 0,
};

const 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;

 

 

After

import { createAction, handleActions } from 'redux-actions'; // 라이브러리 호출

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

export const increase = createAction(INCREASE);  // 액션 정의
export const decrease = createAction(DECREASE);

const counter = handleActions({ // 리듀서 함수도 가독성 높이기, 첫 번째 파라미터에는 각 액션에 대한 업데이트 함수
        [INCREASE]: (state, action) => ({ number: state.number + 1 }),
        [DECREASE]: (state, action) => ({ number: state.number - 1 }),
    },
    {
        number: 10 // 두번째 파라미터에는 초기상태
    }
);

export default counter;

 

 

Before - /modules/todos.jsx

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

const CHANGE_INPUT = 'todos/CHANGE_INPUT'; // 액션 타입 정의
const INSERT = 'todo/INSERT';
const TOGGLE = 'todos/TOGGLE';
const REMOVE = 'todos/REMOVE';

let idx = 3;

export const changeInput = (input) => ({
    type: CHANGE_INPUT,
    input
});

export const insert = (text) => ({
    type: INSERT,
    todo: {
        id: idx++,
        text,
        done: false
    }
});

export const toggle = (id) => ({
    type: TOGGLE,
    id
});

export const remove = (id) => ({
    type: REMOVE,
    id
});

const initialState = {
    input: '',
    todos: [
        {
            id: 1,
            text: '리덕스 기초 배우기',
            done: true
        },
        {
            id: 2,
            text: '리액트와 리덕스 사용하기',
            done: false
        }
    ]
};

const todos = (state = initialState, action) => {
    switch (action.type) {
        case CHANGE_INPUT:
            return {
                ...state,
                input: action.input
            }
        case INSERT:
            return {
                ...state,
                todos: state.todos.concat(action.todo)
            }
        case TOGGLE:
            return {
                ...state,
                todos: state.todos.map(todo =>
                    todo.id === action.id ? { ...todo, done: !todo.done } : todo
                )
            }
        case REMOVE:
            return {
                ...state,
                todos: state.todos.filter(todo => todo.id !== action.id)
            };
        default:
            return state;
    }
}

export default todos;

 

After

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

const CHANGE_INPUT = 'todos/CHANGE_INPUT'; // 액션 타입 정의
const INSERT = 'todo/INSERT';
const TOGGLE = 'todos/TOGGLE';
const REMOVE = 'todos/REMOVE';

let idx = 3;

export const changeInput = createAction(CHANGE_INPUT, input => input);
export const insert = createAction(INSERT, text => ({
    id: idx++,
    text: text,
    done: false
}));
export const toggle = createAction(TOGGLE, id => id);
export const remove = createAction(REMOVE, id => id);

const initialState = {
    input: '',
    todos: [
        {
            id: 1,
            text: '리덕스 기초 배우기',
            done: true
        },
        {
            id: 2,
            text: '리액트와 리덕스 사용하기',
            done: false
        }
    ]
};

const todos = handleActions(
    {
        [CHANGE_INPUT]: (state, { payload: input }) => ({
            ...state, input
        }),
        [INSERT]: (state, { payload: todo }) => ({
            ...state,
            todos: state.todos.concat(todo)
        }),
        [TOGGLE]: (state, { payload: id }) => ({
            ...state,
            todos: state.todos.map(todo =>
                todo.id === id ? { ...todo, done: !todo.done } : todo
            )
        }),
        [REMOVE]: (state, { payload: id }) =>({
            ...state, todos: state.todos.filter(todo => todo.id !== id ),
        })
    },
    initialState
)

export default todos;