[Library] redux-actions - 리덕스를 편하게 사용할 수 있도록 도와주는 라이브러리

redux-actions

액션 생성 함수를 더 짧은 코드로 작성할 수 있게 해준다.
리듀서를 작성할 때 switch문이 아닌 handleActions라는 함수를 사용할 수 있게 해준다.

설치

yarn add redux-actions

createAction

액션 생성 함수를 만들어주는 함수이다.
직접 객체를 만들 필요 없어 훨씬 간단하다.

즉, action생성 자동화

• createAction을 사용하지 않았을 때
  Redux의 action 생성자를 하나씩 만들어야 하는 것

const CHANGE_USER = 'user/CHANGE_USER';
// 액션 생성 함수
export const change_user = user => ({type: CHANGE_USER, user});

• createAction을 사용했을 때
  파라미터로 전달받은 값을 객체에 넣어주는 단순한 패턴 즉, 단순 작업을 createAction을 이용해 해결

import { createAction } from 'redux-actions';
const CHANGE_USER = 'user/CHANGE_USER';
// 액션 생성 함수
export const change_user = createAction(CHANGE_USER, user => user);

handleActions

handleActions로 리듀서를 더 간단하게 작성할 수 있다.

• handleActions을 사용하지 않았을 때

const reducer = (state = initState, action) => {
	switch (action.type) {
		case CHANGE_USER:
			return {
					...state,
					user: action.user
			}
	}
}

• handleActions을 사용했을 때
  createAction()을 사용해서 기존 방식과 다른 payload를 써줘야한다.
  payload에 우리가 담은 값이 존재하게 된다.

import { handleActions } from 'redux-actions';
const reducer = handleActions({
	[CHANGE_USER]: (state, action) => ({...state, user: action.user})
});