10-2. 포스트 초기로딩 액션 작성하기

페이지에 처음 방문했을때 실행하게되는, 가장 최근 포스트 20개를 불러오는 액션을 만들어보겠습니다. 포스트를 불러오는것과 관련된 액션들은 posts 리덕스 모듈에서 관리를 하도록 하겠습니다.

해당 리덕스 모듈의 초기 상태에는 next 값과, data 값을 지니고 있습니다. 서버에서 배열을 받아오면, 이를 fromJS 를 통하여 immutable 형식으로 변환시켜서 상태에 집어넣습니다.

src/redux/modules/posts.js

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

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

const LOAD_POST = 'posts/LOAD_POST'; // 포스트 리스트 초기 로딩

export const loadPost = createAction(LOAD_POST, PostsAPI.list);

const initialState = Map({
    next: '',
    data: List()
});

export default handleActions({
    ...pender({
        type: LOAD_POST,
        onSuccess: (state, action) => {
            const { next, data } = action.payload.data;
            return state.set('next', next)
                        .set('data', fromJS(data));
        }
    })
}, initialState);

그 다음엔 combineReducers 부분에 posts 를 넣어주세요.

src/redux/modules/index.js

import { combineReducers } from 'redux';
import base from './base';
import auth from './auth';
import user from './user';
import home from './home';
import posts from './posts';

import { penderReducer } from 'redux-pender';

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