6-2. 리덕스 액션 준비하기

액션을 통해 API 호출을 할 수 있도록 액션들을 미리 준비하겠습니다.

이메일 / 아이디 중복 확인

우선, 회원가입의 이메일 / 아이디 중복확인 관련 부분을 구현해보겠습니다.

`src/redux/modules/auth.js`

import { createAction, handleActions } from 'redux-actions';
import { pender } from 'redux-pender';
import * as AuthAPI from 'lib/api/auth';

(...)

const CHECK_EMAIL_EXISTS = 'auth/CHECK_EMAIL_EXISTS'; // 이메일 중복 확인
const CHECK_USERNAME_EXISTS = 'auth/CHECK_USERNAME_EXISTS'; // 아이디 중복 확인

(...)

export const checkEmailExists = createAction(CHECK_EMAIL_EXISTS, AuthAPI.checkEmailExists); // email
export const checkUsernameExists = createAction(CHECK_USERNAME_EXISTS, AuthAPI.checkUsernameExists); // username

const initialState = Map({
    register: Map({
        form: Map({
            email: '',
            username: '',
            password: '',
            passwordConfirm: ''
        }),
        exists: Map({
            email: false,
            password: false
        })
    }),
    login: Map({
        form: Map({
            email: '',
            password: ''
        })
    })
});

// reducer
export default handleActions({
    (...)
    ...pender({
        type: CHECK_EMAIL_EXISTS,
        onSuccess: (state, action) => state.setIn(['register', 'exists', 'email'], action.payload.data.exists)
    }),
    ...pender({
        type: CHECK_USERNAME_EXISTS,
        onSuccess: (state, action) => state.setIn(['register', 'exists', 'username'], action.payload.data.exists)
    })
}, initialState);

checkEmailExists 와 checkUsernameExists 의 응답 데이터는 { exists: true } 형식입니다. 여기서 알려주는 값을, register.exists 안에서 설정하도록 코드를 작성하였습니다.

추후, 우리는 이 API 를 회원가입 할 때 아이디와 이메일 인풋이 변경 될 때마다 호출을 하도록 하겠습니다.

회원가입 / 로그인 / 로그아웃

이번엔 회원가입, 로그인, 로그아웃 API를 위한 액션을 만들겠습니다. 로그인과 회원가입의 경우엔, 성공을 했을 때 받는 응답 데이터를 result 안에 넣도록 하겠습니다. 그리고 로그아웃 API 의 경우엔, API 호출을 하고 별도 추가 작업 없이 페이지를 새로고침을 하므로 따로 액션 핸들러를 만들어줄 필요가 없습니다.

`src/redux/modules/auth.js`

import { createAction, handleActions } from 'redux-actions';
import { pender } from 'redux-pender';
import * as AuthAPI from 'lib/api/auth';

(...)

const LOCAL_REGISTER = 'auth/LOCAL_REGISTER'; // 이메일 가입
const LOCAL_LOGIN = 'auth/LOCAL_LOGIN'; // 이메일 로그인

const LOGOUT = 'auth/LOGOUT'; // 로그아웃

(...)

export const localRegister = createAction(LOCAL_REGISTER, AuthAPI.localRegister); // { email, username, password }
export const localLogin = createAction(LOCAL_LOGIN, AuthAPI.localLogin); // { email, password }

export const logout = createAction(LOGOUT, AuthAPI.logout);


const initialState = Map({
    register: Map({
        form: Map({
            email: '',
            username: '',
            password: '',
            passwordConfirm: ''
        }),
        exists: Map({
            email: false,
            password: false
        })
    }),
    login: Map({
        form: Map({
            email: '',
            password: ''
        })
    }),
    result: Map({})
});

// reducer
export default handleActions({
    (...)
    ...pender({
        type: LOCAL_LOGIN,
        onSuccess: (state, action) => state.set('result', Map(action.payload.data))
    }),
    ...pender({
        type: LOCAL_REGISTER,
        onSuccess: (state, action) => state.set('result', Map(action.payload.data))
    }),
}, initialState);

리덕스 관련 코드는 어느정도 완성이 되었습니다. 다음 섹션에서는 위 액션들을 디스패치 하기전에, 문자열들을 검증하는 작업을 진행하겠습니다.

6-2. 리덕스 액션 준비하기