[React] redux-actions로 가독성 높이기

🔸 redux-actions

yarn add redux-actions

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

 

🔸 createAction

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

createAction을 사용하지 않았을 때

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

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을 사용했을 때

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