From fbe2d4acbf768e08b2f9d20036270a0317301d4a Mon Sep 17 00:00:00 2001
From: "yinjun.chen1" <yinjun.chen1@gientech.com>
Date: Thu, 27 Jun 2024 17:30:14 +0800
Subject: [PATCH] 6666

---
 redux/toolkit/public/index.html         |  2 +-
 redux/toolkit/src/App.css               |  9 ++++++++-
 redux/toolkit/src/App.js                |  5 ++++-
 redux/toolkit/src/components/page1.jsx  | 22 ++++++++++++++++++++++
 redux/toolkit/src/store/todosReducer.js |  8 ++++++--
 5 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 redux/toolkit/src/components/page1.jsx

diff --git a/redux/toolkit/public/index.html b/redux/toolkit/public/index.html
index aa069f27c..6ca97afbe 100644
--- a/redux/toolkit/public/index.html
+++ b/redux/toolkit/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>@reduxjs/toolkit</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/redux/toolkit/src/App.css b/redux/toolkit/src/App.css
index 74b5e0534..98e81439a 100644
--- a/redux/toolkit/src/App.css
+++ b/redux/toolkit/src/App.css
@@ -1,10 +1,14 @@
 .App {
   text-align: center;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .App-logo {
   height: 40vmin;
   pointer-events: none;
+  
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -14,6 +18,7 @@
 }
 
 .App-header {
+  width: 50%;
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -23,7 +28,9 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
-
+.container{
+  width: 50%;
+}
 .App-link {
   color: #61dafb;
 }
diff --git a/redux/toolkit/src/App.js b/redux/toolkit/src/App.js
index 378457572..d5d260876 100644
--- a/redux/toolkit/src/App.js
+++ b/redux/toolkit/src/App.js
@@ -1,6 +1,6 @@
 import logo from './logo.svg';
 import './App.css';
-
+import Page1 from './components/page1';
 function App() {
   return (
     <div className="App">
@@ -18,6 +18,9 @@ function App() {
           Learn React
         </a>
       </header>
+      <div className="container">
+        <Page1 />
+      </div>
     </div>
   );
 }
diff --git a/redux/toolkit/src/components/page1.jsx b/redux/toolkit/src/components/page1.jsx
new file mode 100644
index 000000000..ed8ef4582
--- /dev/null
+++ b/redux/toolkit/src/components/page1.jsx
@@ -0,0 +1,22 @@
+import {useEffect} from 'react'
+import {addTodo} from '../store/todosReducer'
+import {useSelector, useDispatch} from 'react-redux'
+function Hehe(){
+    const test1=()=>{
+        dispatch(addTodo('love'))
+    }
+    const {todos}=useSelector(state=>state.todos)
+    const dispatch=useDispatch()
+    useEffect(()=>{
+        test1()
+    },[])
+    console.log(todos)
+    return (
+        <div>
+            <h1>page1</h1>
+            <button onClick={test1}>TodosReducer</button>
+            
+        </div>
+    )
+}
+export default Hehe
\ No newline at end of file
diff --git a/redux/toolkit/src/store/todosReducer.js b/redux/toolkit/src/store/todosReducer.js
index 3686e0a81..5ad39ad1a 100644
--- a/redux/toolkit/src/store/todosReducer.js
+++ b/redux/toolkit/src/store/todosReducer.js
@@ -2,10 +2,14 @@ import { createSlice } from "@reduxjs/toolkit"
  
 let nextTodoId = 0
 const todosReducer = createSlice({
-  name: 'todos',
+  name: 'todo',
   // 初始状态
   initialState: {
-    todos:[]
+    todos:[{
+      text: 'Learn React',
+      id: nextTodoId,
+      completed: false
+    }]
   },
   // 修改数据的方法
   reducers: {