はじめに
本記事は、「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を使った実装に修正していく。