react

19.React/高阶/project4/src/App.js

@@ -1,23 +1,9 @@
-import logo from './logo.svg';
-import './App.css';
 
+import Demo1 from './components/Demo1';
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+     <Demo1></Demo1>
     </div>
   );
 }

19.React/高阶/project4/src/components/Demo1.jsx

@@ -0,0 +1,15 @@
+import { useSelector,useDispatch } from "react-redux";
+import { setName } from "../store/slices/user";
+function Demo1() {
+    const dispatch = useDispatch();
+    const user = useSelector(({users}) => users);
+    console.log(user,'user')
+    return <div>
+        <h1>demo1</h1>
+        <h3>我叫{user.user}</h3>
+        <button onClick={()=>{
+            dispatch(setName());
+        }}>修改名字</button>
+    </div>
+}
+export default Demo1;

19.React/高阶/project4/src/store/slices/user.js

@@ -1,10 +1,26 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 export const userSlice = createSlice({
-    name:'user1',
-    initialState:{
+    name:'user1', // 指定状态片段的名称 类似于id
+    initialState:{ //初始化状态
         user:"蜡笔小新"
+    },
+    // 方法
+    reducers:{
+        /**
+         * 每一个reducer函数 都会接受两个参数
+         * state 表示当前状态
+         * action 一个对象 
+         * a.type 
+         * b.payload
+         *  */ 
+        setName(state,action) {
+            state.user = '哆啦A梦';
+        }
+    
     }
 })
 
-export default userSlice.reducer;
+export default userSlice.reducer;
+// 在slice对象中 有一个属性actions 类型是对象 存储所有reducer函数对应构建的actiion对象的函数
+export const {setName} = userSlice.actions;