100日目②： Profile Reducerの作成とCurrent ProfileをGetする

2019年06月26日 2019年06月26日

キョウコ

先程の続きで、Profile Reducerの作成とユーザーの現在のprofileをgetする、ということを行いました。Profile Reducer & action 仕様で、バックエンドにリクエストを行い、componentsを通じてデータを送る、ということが目的です。

①新しくsrc/reducers/profile.jsファイルを作成する

プロフィール情報をgetできるよう、新しいファイルprofile.jsをreducers内に作成しました。

profiles(複数）の部分が[] (空欄のブラケット）になっているのは、リストとして表示するためです。

import { GET_PROFILE, PROFILE_ERROR } from "../actions/types";

const initialState = {
  profile: null,
  profiles: [], //profile listing page
  repos: [],
  loading: true,
  error: {}
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_PROFILE:
      return {
        ...state,
        profile: payload,
        loading: false
      };
    case PROFILE_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    default:
      return state;
  }
}

②src/reducers/index.jsへコードを書き足す

profileについての情報を書き足しました。

import { combineReducers } from "redux";
import alert from "./alert";
import auth from "./auth";
import profile from "./profile";

export default combineReducers({
  alert,
  auth,
  profile
});

③src/actions/types.jsへコードを書き足す

types.jsにも、GET_PROFILE, PROFILE_ERRORをexportできるようコードを書き足します。この作業はルーティン化しているので慣れてきました。

export const GET_PROFILE = "GET_PROFILE";
export const PROFILE_ERROR = "PROFILE_ERROR";

④src/actions/profile.jsという新しいファイルを作成

actionsにprofile.jsファイルを作成しました。こちらも3行目のsetAlertの部分でエラーが出てしまったので、//eslint-disable-next-lineで応急処置をしています。（後ほど外す予定）

import axios from "axios";
// eslint-disable-next-line
import { setAlert } from "./alert";

import { GET_PROFILE, PROFILE_ERROR } from "./types";

// Get current users profile
export const getCurrentProfile = () => async dispatch => {
  try {
    const res = await axios.get("/api/profile/me");

    dispatch({
      type: GET_PROFILE,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: PROFILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

最後にlocalhostとRedux devtools extensionで動作確認したのですが、全て問題なく動いたのでOKとしました！（Git Bashの方はcomplied with warningなのでまだまだ対策が必要そうです。）