Redux Toolkit Tutorialを通してreduxを学ぶ　#2

## はじめに
本記事は、「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
```

まずルート。
ここでは全ての子コンポーネントでステートを参照、更新できるように親でステートを定義する。
```  diff_tsx: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」ボタン押下：ステート初期化


```  diff_tsx: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でも、ユーザ名を表示するように修正。

```  diff_tsx: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;

```

```  diff_tsx: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を使った実装に修正していく。

## 関連記事
- [Redux Toolkit Tutorialを通してreduxを学ぶ　#3](https://qiita.com/atok/items/1f16deb76858023f5e5b)

- [Redux Toolkit Tutorialを通してreduxを学ぶ　#1](https://qiita.com/atok/items/3ff72c22e22d484f2c87)