9-7. 포스트 작성 API 호출하기

드디어, 서버에 우리의 포스트 내용을 전달해줄 차례입니다. 우선, posts API 들을 요청하는 함수들을 모듈로 만들어봅시다.

src/lib/api/posts.js

import axios from 'axios';

export const write = (content) => axios.post('/api/posts', { content });
export const list = () => axios.get('/api/posts');
export const listOfUser = (username) => axios.get(`/api/posts?username=${username}`);
export const next = (url) => axios.get(url);

지금 당장 사용 할 API 는 write 밖에 없지만, 나머지들도 미리 만들어주었습니다.

이제 home 리덕스 모듈에서 WRITE_POST 액션을 준비하겠습니다.

src/redux/modules/home.js

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

import { Map } from 'immutable';
import { pender } from 'redux-pender';
import * as PostsAPI from 'lib/api/posts';

// action types
const CHANGE_WRITE_POST_INPUT = 'home/CHANGE_WRITE_POST_INPUT'; // 인풋 내용 수정
const WRITE_POST = 'home/WRITE_POST'; // 포스트 작성

// action creator
export const changeWritePostInput = createAction(CHANGE_WRITE_POST_INPUT); // value
export const writePost = createAction(WRITE_POST, PostsAPI.write); // content

// initial state
const initialState = Map({
    writePost: Map({
        value: ''
    }),
});

// reducer
export default handleActions({
    [CHANGE_WRITE_POST_INPUT]: (state, action) => state.setIn(['writePost', 'value'], action.payload),
    ...pender({
        type: WRITE_POST,
        onPending: (state, action) => state.setIn(['writePost', 'value'], '') // 인풋 내용 비우기
    })
}, initialState);

write API 가 시작됐을 때, onPending 설정을 통하여 value 의 값을 초기화시키도록 설정하였습니다. 여기선 onSuccess 부분은 따로 처리하지 않습니다. 그 이유는, 성공 했을때 데이터를 리스트에 추가시키는게 아니라, 나중에 소켓을 통해서 실시간으로 서버에서 데이터를 받았을 때 추가하기 때문입니다.

이제 write API 를 호출하기 위한 준비가 끝났습니다. handlePost 만 구현해주면, 포스트 작성이 완료됩니다!

이 부분은, 매우 매우 간단합니다.

src/contaienrs/Home/WritePostContainer.js - handlePost

    handlePost = () => {
        // 게이지가 다 차면 실행되는 메소드
        const { HomeActions, value } = this.props;
        HomeActions.writePost(value);
    }

인풋 초기화는 onPending 에서 이뤄지기때문에 따로 해야 할 작업이 없습니다.

여기까지 구현을 하고 나면, WritePost 에서 텍스트를 입력하고 나면 포스트 작성 API 를 호출하게 됩니다. 한번 테스팅을 해보세요. 텍스트를 입력하고 나서 개발자 도구의 Network 부분을 참고해보시면 됩니다.