Reboot:9

Author: daisukenishino2

UI/SPA/React/vite-redux-ts/package-lock.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.11.2",
     "@tailwindcss/forms": "^0.5.11",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.13.2",
     "tailwindcss": "^4.2.2"
   },

UI/SPA/React/vite-redux-ts/package.json

@@ -7,8 +7,9 @@ import About from './pages/About'
 import Settings from './pages/Settings'
 import { Counter } from './pages/Counter'
 import { FetchData } from './pages/FetchData'
-import { CrudSample } from './pages/CrudSample'
-import { CrudSample2 } from './pages/CrudSample2'
+ // 名前付きimport から default import に変更 connectされたComponentを使用）
+import CrudSample from './pages/CrudSample'
+import CrudSample2 from './pages/CrudSample2'
 import { RedirectOfAuth } from './components/RedirectOfAuth';
 
 import './App.css'

UI/SPA/React/vite-redux-ts/src/App.tsx

@@ -3,8 +3,15 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
+// Redux 関連のインポート
+import { Provider } from 'react-redux'
+import { store } from './store'
+
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </StrictMode>,
 )

UI/SPA/React/vite-redux-ts/src/main.tsx

@@ -1,3 +1,17 @@
+import { useSelector } from 'react-redux'
+import type { RootState } from '../store'
+
 export default function About() {
-  return <div><h1>About</h1><p>About Pageです。</p></div>
+  // Reduxのstoreから値を取得
+  const count = useSelector((state: RootState) => state.counter.value)
+  const message = useSelector((state: RootState) => state.crudSample.message)
+  
+  return <div>
+    <h1>About</h1>
+    <p>About Pageです。</p>
+    {/* countを表示 */}
+    <p>現在のカウント: {count}</p>
+    {/* messageを表示 */}
+    <p>現在のメッセージ: {message}</p>
+  </div>  
 }

UI/SPA/React/vite-redux-ts/src/pages/About.tsx

@@ -1,35 +1,71 @@
 import * as React from 'react';
 
-// Propsの型定義（今回は不要だが明示）
-type CounterProps = {};
+// Redux 関連のインポート
+import { useSelector, useDispatch } from 'react-redux';
+import type { RootState, AppDispatch } from '../store';
+import { increment, reset } from '../store/counterSlice';
+
+// --- 既存コード
+
+// Propsの型定義
+type CounterProps //= {};
+= {
+  currentCount: number;
+  onIncrement: () => void;
+  onReset: () => void;
+};
 
 // Stateの型定義
 type CounterState = {
   currentCount: number;
 };
 
-export class Counter extends React.Component<CounterProps, CounterState> {
-  constructor(props: CounterProps) {  // ← props を受け取るよう修正
-    super(props);                      // ← super(props) に修正
+// 以下、Redux修正あり
+// クラス名称を変更
+export class Counter_org extends React.Component<CounterProps, CounterState> {
+  constructor(props: CounterProps) {
+    super(props);
     this.state = { currentCount: 0 };
   }
 
+  // Reduxのdispatchを呼び出す形に変更
   render() {
     return (
       <div>
         <h1>Counter</h1>
         <p>This is a simple example of a React component.</p>
-        <p>Current count: <strong>{this.state.currentCount}</strong></p>
-        <button className='btn-primary' onClick={() => this.incrementCounter()}>
+        <p>Current count: <strong>{this.props.currentCount}</strong></p>
+        <button className='btn-primary' onClick={() => this.props.onIncrement()}>
           Increment
         </button>
+        <button className='btn-primary' onClick={() => this.props.onReset()}>
+          Reset
+        </button>
       </div>
     );
   }
 
-  incrementCounter() {
+  /*incrementCounter() {
     this.setState({
       currentCount: this.state.currentCount + 1,
     });
-  }
+  }*/
 }
+
+// --- Reduxラッパー ---
+export const Counter = () => {
+  const currentCount = useSelector((state: RootState) => state.counter.value);
+  const dispatch = useDispatch<AppDispatch>();
+
+  // dispatch の戻り値を void に吸収させる
+  const handleIncrement = (): void => { dispatch(increment()); };
+  const handleReset = (): void => { dispatch(reset()); };
+
+  return (
+    <Counter_org
+      currentCount={currentCount}
+      onIncrement={handleIncrement}
+      onReset={handleReset}
+    />
+  );
+};