6666

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>

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;
 }

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>
   );
 }

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

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: {