106日目①：プロフィールのアクションとReducerを完成させる

2019年07月09日 2019年07月09日

キョウコ

昨日エラーを起こす前に成功した部分である”プロフィールのアクションとReducerを追加して完成させたところまで”をまとめます。

アクションのprofile.jsに追加したのは、３つのことです。

１つ目が、全てのプロフィールを取得（Get all profiles)、GitHubのレポジトリの取得(Get GitHub Repos)、そして、プロフィールをIDで取得（Get profile by Id)です。

その後、types.jsへアクションの追加、Reducersのprofile.jsにも追加コーディングを行いました。

①client/src/actions/profile.js　３つのアクションを追加

まずは、import部分に新しいアクションを追加していきます。今回追加したのは、GET_PROFILES(以前書いたGET_PROFILEとは異なり複数形）とGET_REPOS（GitHubのレポジトリ取得）です。

import {
  GET_PROFILE,
  GET_PROFILES,
  PROFILE_ERROR,
  UPDATE_PROFILE,
  CLEAR_PROFILE,
  ACCOUNT_DELETED,
  GET_REPOS
} from "./types";

そして、先程も書いたように、３つのアクションを追加しました。

// Get all profiles
export const getProfiles = () => async dispatch => {
  dispatch({ type: CLEAR_PROFILE });
  try {
    const res = await axios.get("/api/profile");

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

// Get profile by ID
export const getProfileById = userId => async dispatch => {
  try {
    const res = await axios.get(`/api/profile/user/${userId}`);

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

// Get Github repos
export const getGithubRepos = username => async dispatch => {
  try {
    const res = await axios.get(`/api/profile/github/${username}`);

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

②client/src/actions/types.jsにGET_PROFILESとGET_REPOSを追加

export const GET_PROFILES = "GET_PROFILES";
export const GET_REPOS = "GET_REPOS";

③client/src/reducers/profile.js

まずは、importに先程と同じようにGET_PROFILESとGET_REPOSを追加しました。

import {
  GET_PROFILE,
  PROFILE_ERROR,
  CLEAR_PROFILE,
  UPDATE_PROFILE,
  GET_PROFILES,
  GET_REPOS
} from "../actions/types";

その後、switch~caseの部分にそれぞれ追加です。

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

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

  switch (type) {
    case GET_PROFILE:
    case UPDATE_PROFILE:
      return {
        ...state,
        profile: payload,
        loading: false
      };
    case GET_PROFILES:
      return {
        ...state,
        profiles: payload,
        loading: false
      };
    case PROFILE_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    case CLEAR_PROFILE:
      return {
        ...state,
        profile: null,
        repos: [],
        loading: false
      };
    case GET_REPOS:
      return {
        ...state,
        repos: payload,
        loading: false
      };

    default:
      return state;
  }
}

ここまでが、昨日エラーを起こさず上手くコーディングできた部分です。（コードの中にメモを残している部分はいずれ消すかもしれません。）