20.4.6 redux-saga 코드 준비하기

    이번에는 redux-saga를 사용하는 경우 서버 사이드 렌더링을 어떻게 해야 하는지 알아보겠습니다.

    yarn으로 redux-saga를 설치해 주세요.

    $ yarn add redux-saga

    users 리덕스 모듈에서 redux-saga를 사용하여 특정 사용자의 정보를 가져오는 작업을 관리해 보겠습니다.

    modules/users.js

    import axios from 'axios';
    import { call, put, takeEvery } from 'redux-saga/effects';
    
    const GET_USERS_PENDING = 'users/GET_USERS_PENDING';
    const GET_USERS_SUCCESS = 'users/GET_USERS_SUCCESS';
    const GET_USERS_FAILURE = 'users/GET_USERS_FAILURE';
    
    const GET_USER = 'users/GET_USER';
    const GET_USER_SUCCESS = 'users/GET_USER_SUCCESS';
    const GET_USER_FAILURE = 'users/GET_USER_FAILURE';
    
    const getUsersPending = () => ({ type: GET_USERS_PENDING });
    const getUsersSuccess = payload => ({ type: GET_USERS_SUCCESS, payload });
    const getUsersFailure = payload => ({
      type: GET_USERS_FAILURE,
      error: true,
      payload
    });
    
    export const getUser = id => ({ type: GET_USER, payload: id });
    const getUserSuccess = data => ({ type: GET_USER_SUCCESS, payload: data });
    const getUserFailure = error => ({
      type: GET_USER_FAILURE,
      payload: error,
      error: true
    });
    
    export const getUsers = () => async dispatch => {
      (...)
    };
    
    const getUserById = id =>
      axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    
    function* getUserSaga(action) {
      try {
        const response = yield call(getUserById, action.payload);
        yield put(getUserSuccess(response.data));
      } catch (e) {
        yield put(getUserFailure(e));
      }
    }
    
    export function* usersSaga() {
      yield takeEvery(GET_USER, getUserSaga);
    }
    
    const initialState = {
      users: null,
      user: null,
      loading: {
        users: false,
        user: false
      },
      error: {
        users: null,
        user: null
      }
    };
    
    function users(state = initialState, action) {
      switch (action.type) {
        (...)
        case GET_USER:
          return {
            ...state,
            loading: { ...state.loading, user: true },
            error: { ...state.error, user: null }
          };
        case GET_USER_SUCCESS:
          return {
            ...state,
            loading: { ...state.loading, user: false },
            user: action.payload
          };
        case GET_USER_FAILURE:
          return {
            ...state,
            loading: { ...state.loading, user: false },
            error: { ...state.error, user: action.payload }
          };
        default:
          return state;
      }
    }
    
    export default users;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.