はじめに

本記事は、「Redux Toolkit Tutorialを通してreduxを学ぶ　#1」の続きです。

・Reduxを使用した場合
・Reduxを使用しなかった場合

の両方のコードを比較し、初学者目線でreduxを活用するメリットについて記述します。

目次

#2でやりたいこと
Reduxを使用しなかった場合の実装
ここまでの動作確認

やりたいこと

以下のページ構成となっているサンプルプロジェクトにて、

Home
Login
Contact

Loginページで入力したユーザ名を保持し、
全てのページでユーザ名を参照できるようにする。

Reduxを使用しなかった場合の実装

以降、#1で作成したサンプルプロジェクトを別名でコピーして、
コピー先プロジェクトに編集を加えていく。

cp -R sample_ts_project sample_ts_project_noRedux

まずルート。
ここでは全ての子コンポーネントでステートを参照、更新できるように親でステートを定義する。

components/App.tsx

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import Contact from "./Contact";
+ import { useState } from "react";

function App() {
+  const [newUsername, setNewUsername] = useState<string>("");

+  function updateUsername(name: string){
+    setNewUsername(name);
+  }

  return (
    <div className="App">
        <Router>
          <Link to="/">Home </Link>
          <Link to="/login">Login </Link>
          <Link to="/contact">Contact </Link>
          <Routes>
-            <Route path="/" element={<Home />} />
+            <Route path="/" element={<Home username={newUsername} />} />
-            <Route path="/login" element={<Login />} />
+            <Route path="/login" element={<Login username={newUsername} onUpdate={updateUsername}/>} />
-            <Route path="/contact" element={<Contact />} />
+            <Route path="/contact" element={<Contact username={newUsername} />} />
          </Routes>
        </Router>
    </div>
  );
}

export default App;

Loginページで入力したユーザ名でステートを更新する。
各ボタン押下時に行う処理は以下の通り。

「Submit login」ボタン押下：ステート更新,テキストボックスの表示も初期化
「Logout」ボタン押下：ステート初期化

components/Login.tsx

import { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";

+ interface Props{
+   username: string;
+   onUpdate: (name:string) => void;
+ }

- function Loign() {
+ function Loign(props: Props) {
  const [inputUsername, setInputUsername] = useState<string>("");
- const username:string = "";

  function handleLogin(event:any) {
    event.preventDefault();
-   console.log("inputUsename: " +inputUsername);
+   props.onUpdate(inputUsername);
+   setInputUsername("");
  }

  function handleLogout(event:any){
    event.preventDefault();
+   props.onUpdate("");
+   setInputUsername("");
  }

  return (
    <div>
      <Header />
      <div className="login">
-        {username}
+        {props.username}
        <form className="login">
          <input
            name="loginV"
            placeholder="loginPH"
            value={inputUsername}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                console.log(e.target.value);
                setInputUsername(e.target.value);
            }}
          />
          <button onClick={handleLogin}> Submit login</button>
          <button onClick={handleLogout}> Logout</button>
        </form>
      </div>
      <Footer />
    </div>
  );
}

export default Loign;

Contact, Homeでも、ユーザ名を表示するように修正。

components/Contact.tsx

import Header from "./Header";
import Footer from "./Footer";

+ interface Props{
+   username: string;
+ }

- function Contact() {
+ function Contact(props: Props) {
-  const username:string = "";
  return (
    <div>
      <Header />
-      <div className="contact">Contact {username}</div>
+      <div className="contact">Contact {props.username}</div>
      <Footer />
    </div>
  );
}

export default Contact;

components/Home.tsx

import Header from "./Header";
import Footer from "./Footer";

+ interface Props{
+   username: string;
+ }

- function Home() {
+ function Home(props:Props) {
-    const username:string = "";
  return (
    <div>
      <Header/>
-      <div className="home"> Home route {username}</div>
+      <div className="home"> Home route {props.username}</div>
      <Footer/>
    </div>
  );
}

export default Home;

ここまでの動作確認

アプリが立ち上げられることを確認する。

$ npm start

現時点では、Loginページにて、

ユーザ名を入力し「Submit login」ボタンを押下すると、
(修正前)Devtoolのコンソールに入力したユーザ名が表示される。
(修正後)全てのページで「ユーザ名」が表示される。
「Logout」ボタンを押下すると、
（修正前）テキストボックスの値がクリアされる。
（修正後）全てのページで「ユーザ名」がクリアされる。

#3に続く

#3では,上記修正したソースをRedux Toolkitを使った実装に修正していく。

関連記事