6-1. API 함수 준비 및 redux-pender 적용

API 함수 준비

우리가 만든 API 들을 호출하는 함수들을 만들어보겠습니다.

우선 Ajax 클라이언트인 axios와, 비동기 리덕스 액션을 관리 할 때 필요한 redux-pender 를 설치하세요.

$ yarn add axios redux-pender

그 다음엔, lib/api 디렉토리에 auth.js 파일을 생성하여 회원인증 관련 함수를 생성하세요.

`src/lib/api/auth.js`

import axios from 'axios';

export const checkEmailExists = (email) => axios.get('/api/auth/exists/email/' + email);
export const checkUsernameExists = (username) => axios.get('/api/auth/exists/username/' + username);

export const localRegister = ({email, username, password}) => axios.post('/api/auth/register/local', { email, username, password });
export const localLogin = ({email, password}) => axios.post('/api/auth/login/local', { email, password });

export const checkStatus = () => axios.get('/api/auth/check');
export const logout = () => axios.post('/api/auth/logout');

webpack 개발서버 프록시 적용하기

API 요청을 할 때, 현재 주소에서 호스트를 따로 입력하지 않고 바로 경로를 입력했기 때문에, API 를 호출하게 되면 현재 호스트로 요청을 하게 됩니다. 개발서버는 3000 포트로 열려있는데, API 서버 포트는 4000 에서 열려있으니 작동하지 않겠죠.

개발서버에서 원할하게 작동하게 하기 위해서는 웹팩 프록시를 적용해주어야합니다. create-react-app 으로 만든 프로젝트에서는 package.json 파일에 다음 속성을 추가해주면 프록시를 적용 할 수있습니다. 파일을 열어 최하단에 다음 항목을 입력하세요.

`package.json`

  (...)
  "proxy": "http://localhost:4000"
}

redux-pender 적용

이제 리덕스에 redux-pender 미들웨어를 적용하겠습니다. 먼저 configureStore 를 수정하세요

`src/redux/configureStore.js`

import { createStore, applyMiddleware, compose } from 'redux';
import penderMiddleware from 'redux-pender';
import modules from './modules';

const isDevelopment = process.env.NODE_ENV === 'development'; // 환경이 개발모드인지 확인합니다
const composeEnhancers = isDevelopment ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose;

// Todo: 미들웨어, react-hot-loader 적용
const configureStore = (initialState) => {
    const store = createStore(modules, initialState, composeEnhancers(
        applyMiddleware(penderMiddleware())
    ));

    // hot-reloading 를 위한 코드
    if(module.hot) {
        module.hot.accept('./modules', () => {
            const nextRootReducer = require('./modules').default;
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
}

export default configureStore;

그다음엔 penderReducer 를 적용합니다. combineReducers 가 실행되는 modules 의 인덱스파일을 수정하세요.

`src/redux/modules/index.js`

import { combineReducers } from 'redux';
import base from './base';
import auth from './auth';
import { penderReducer } from 'redux-pender';

export default combineReducers({
    base,
    auth,
    pender: penderReducer
});

6-1. API 함수 준비 및 redux-pender 적용