Today I Learned

매일 배운 것을 정리하며 기록합니다. redux-actions에 대해 공부하였습니다.
(작성 중)

리덕스를 편하게 사용하는 법

• redux-actions
• immer
• 미들웨어를 통한 비동기 작업처리

redux-actions

• createAction(action, [payload]) 함수를 통해 액션 생성 함수를 기존보다 짧은 코드로 구현
• handleActions(각 액션 업데이트 함수, 초기 상태) 함수를 통해 switch/case문을 대체
• ex)

1. 라이브러리 설치
   $ yarn add redux-actions

2. import 를 통해 불러온 후 createAction 함수를 사용하여 액션 생성 함수를 만듭니다.

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

const CLICK_SIGN_IN_BTN = 'signIn/CLICK_SIGN_IN_BTN';
const SET_EMAIL = 'signIn/SET_EMAIL';
const SET_PASSWORD = 'signIn/SET_PASSWORD';

export const clickSignInBtn = createAction(CLICK_SIGN_IN_BTN);
export const setEmail = createAction(SET_EMAIL, email => email);
export const setPassword = createAction(SET_PASSWORD, password => password);

3. 리듀서 함수는 handleActions 함수를 사용합니다.

...

const initialState = {
    isClickedSignInBtn: false,
    email: null,
    password: null,
}

const signIn = handleActions(
    {
        [CLICK_SIGN_IN_BTN]: (state, action) => ({...state, 	isClickedSignInBtn: true}),
        [SET_EMAIL]: (state, { payload: email}) => ({...state, email}),
        [SET_PASSWORD]: (state, {payload: password}) => ({...state, password}),
    },
    initialState
)

export default signIn;

Reference : 김민준(VELOPERT), 『리액트를 다루는 기술』, 길벗 (2019), p457-.