[React]~Ambassador画面2: Redux、ルーティング、ログイン、ユーザー処理を実装しよう!~

こんにちは、KOUKIです。

ReactでAmbassador画面を実装中です。

今回は、Admin画面の時にも作成した以下の機能を実装します。

  • Reduxの導入
  • ルーティング設定
  • ログイン処理
  • ユーザー登録処理

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

前回は、Ambassador画面の環境構築を行いました。

事前準備

フォルダ/ファイル

モジュール

package.json

モデルの作成

Admin画面と同じように、モデルを用意しましょう。

Linkモデル

Userモデル

Productモデル

Reduxの導入

Admin画面で実装したReduxも導入しましょう。

setUserAction.ts

setUserReducer.ts

configureStore.ts

index.tsx

index.tsxに以下の設定をします。

  1. 共通のURLの定義
  2. 認証許可
  3. Reduxの設定

Layout.ts

Layout.tsにRedux Storeへアクセスするためのコードを実装します。

Pages

Admin画面と同じように、ログイン画面と登録画面を作成しましょう。

Login.tsx

Login.css

Register.tsx

App.css

index.css

ルートの設定

ログイン画面と登録画面へのルートを設定します。

ログイン画面

ブラウザから「http://localhost:4000/login」へアクセスします。

登録画面

ブラウザから「http://localhost:4000/register」へアクセスします。

デモ

次回

次回は、ナビゲーションを実装しましょう

Reactまとめ

開発まとめ

参考書籍


コメントを残す