97日目：Redux概要を復習＆Redux devtools extension動く＆ Auth ReducerとRegister Action作成

2019年06月20日 2019年06月20日

キョウコ

昨日色々と上手くいかなかったので、本日は復習のみで終わるかと思ったのですが、ユーザーauthenticationのセクションを進めることができました。

まずは、昨日「わからない」と思っていたReduxの全体的な概要とdispatchの定義について掌田津耶乃さんの本「React.js & Next.js」で学びました。Udemyの講座を進める前にこの本を先に学習した方が良かったと改めて思いました。

次は、昨日からの問題「Redux devtools extensionが動かない」ということについてです。昨日分のUdemy講座を全て見直したところ、私が書いたコードに間違いはありませんでした。今日Redux devtools extensionを起動してみたところ…動く…。もしかすると、昨日も再起動すれば良かったのかもしれません。

最後に、次のセクションに進んで、React User Authenticationを行っていくために、reducersやactionsフォルダにauth.jsを作成していくというコーディングを行いました。

少しでも進んで、久々に満足の一日です。

Reduxの全体的な概要とdispatchの定義について（参照：掌田津耶乃さんの本「React.js & Next.js」）

①Reduxは「状態管理」ツールである。Reactではコンポーネントの状態を個別に扱っていたが、Reduxでは統合して管理する昨日がある。

②すべてのデータは「ストア」で保管する。アプリケーションごとに１つのみ用意する。（保管されている値は「ステート（state)」と呼ばれる

③値は読み取り専用であり、書き換え不可（だが、変更はできる。）

④ストアの書き換えはできないが、簡単な関数で変更することはできる。

Reduxの仕組み

ストア：データを保管し管理する。データの値はステート（state)と呼ぶ。

プロバイダー：ストアを他のコンポーネントに受け渡す仕組み

レデューサー：ストアに保管されるステートを変更するための仕組み

ディスパッチ：レデューサーを呼び出し値を操作するための機能

Redux使用時の全体の流れ

①ステートを準備する⇒②レデューサーを準備する⇒③ストアを準備する

その後で、

④ディスパッチ（dispatch)を呼び出す⇒⑤レデューサーが呼び出される⇒⑥アクションのtypeで処理を分岐

する、という流れです。実際の関数などについては本の中で一つ一つ丁寧に説明されていました。とてもわかりやすいので、こちらの本のアプリを先に作りたい気持ちがムクムクと湧いてきたのですが、まずは概要の学習のみを行いました。あと5回ぐらい読んでしっかり理解する予定です。

Redux devtools extensionが使えるようになった

最初にも書いたのですが、今日になって突然Redux devtools extensionが使えるようになっていました。昨日はだいぶつまづいた感があったので、とりあえず再起動すればよかったなと思います。

起動して反応したのが嬉しかったため、本日のアイキャッチ画像はRedux devtools extensionの写真です。（スクショしようとすると画面が消えるため写真となりました。）

今回は、ユーザーの登録をするとtokenを見ることができたり、エラー表示もちゃんとできるということが確認できました。良い感じです。

次のセクションに進んでReact User Authenticationができるように作業した

Reduxの設定は問題なくできたということで、reducersとactionフォルダにauth.jsを作成しました。

reducers/auth.jsのコードはこちら。

import { REGISTER_SUCCESS, REGISTER_FAIL } from "../actions/types";

const initialState = {
  token: localStorage.getItem("token"),
  isAuthenticated: null,
  loading: true,
  user: null
};

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

  switch (type) {
    case REGISTER_SUCCESS:
      localStorage.setItem("token", payload.token);
      return {
        ...state,
        ...payload,
        isAuthenticated: true,
        loading: false
      };
    case REGISTER_FAIL:
      localStorage.removeItem("token");
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loading: false
      };
    default:
      return state;
  }
}
actions/auth.jsのコードはこちらです。

import axios from "axios";
import { setAlert } from "./alert";
import { REGISTER_SUCCESS, REGISTER_FAIL } from "./types";

//Register User
export const register = ({ name, email, password }) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };

  const body = JSON.stringify({ name, email, password });

  try {
    const res = await axios.post("/api/users", body, config);

    dispatch({
      type: REGISTER_SUCCESS,
      payload: res.data
    });
  } catch (err) {
    const errors = err.response.data.errors;

    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, "danger")));
    }

    dispatch({
      type: REGISTER_FAIL
    });
  }
};
本を読んだおかげで、
自分がどのような関数を書いて操作していくのか全体的なイメージがつかめました。
昨日分のUdemy講座の動画（Redux Setup & Alerts)も全て見直したので復習できて良かったです。