no message

redux/redux-reactRedux-toolkit-pure/src/App.js

@@ -1,25 +1,32 @@
 import React, { useEffect } from 'react'
 // 导入React Redux提供的Hooks
 import { useDispatch, useSelector } from 'react-redux'
-import {decrement, fetchUsers, incrementByAmount } from './store/modules/users'
+import reducer,{increment,decrement, fetchUsers, incrementByAmount} from './store/modules/users'
 
 export default function App(){
 	// 结构出 list
 	const { list, count } = useSelector(state => state.users)
 	const dispatch = useDispatch()
+
 	// 使用useEffect触发异步请求执行
-	useEffect(()=>{
+	// useEffect(()=>{
+	// 	dispatch(fetchUsers())
+	// },[dispatch])
+
+	const reload=()=>{
 		dispatch(fetchUsers())
-	},[dispatch])
+		console.log(fetchUsers())
+		
+	}
 	return (
 		<div>
 			<h2>当前users中count的值为：{count}</h2>
 			<div>
-				<button onClick={() => dispatch(decrement())}>count+1</button>
+				<button onClick={() => dispatch(increment(66))}>count+1</button>
 				<button onClick={() => dispatch(decrement())}>count-1</button>
 				<button onClick={() => dispatch(incrementByAmount(-10))}>count-10</button>
 				<button onClick={() => dispatch(incrementByAmount(10))}>count+10</button>
-				<button onClick={() => dispatch(fetchUsers())}>重新请求</button>
+				<button onClick={reload}>重新请求</button>
 			</div>
 			<h2>当前usersz中list的值为：{list}</h2>
 			<ul>

redux/redux-reactRedux-toolkit-pure/src/index.js

@@ -9,7 +9,7 @@ import App from './App.js';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-	<React.StrictMode>：
+	<React.StrictMode>
 		<Provider store={store}>
 			<PersistGate loading={null} persistor={persistor}>
 				<App />

redux/redux-reactRedux-toolkit-pure/src/store/modules/dist/users.dev.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.fetchUsers = exports.incrementByAmount = exports.decrement = exports.increment = void 0;
+
+var _toolkit = require("@reduxjs/toolkit");
+
+var usersSlice = (0, _toolkit.createSlice)({
+  name: 'users',
+  initialState: {
+    list: [],
+    count: 0
+  },
+  reducers: {
+    increment: function increment(state, action) {
+      console.log(action);
+      state.count++;
+    },
+    decrement: function decrement(state) {
+      state.count--;
+    },
+    incrementByAmount: function incrementByAmount(state, action) {
+      console.log(action.payload);
+      state.count += action.payload;
+    },
+    setUsers: function setUsers(state, action) {
+      state.list = action.payload;
+    }
+  }
+}); // 3. 解构actions
+
+var _usersSlice$actions = usersSlice.actions,
+    increment = _usersSlice$actions.increment,
+    decrement = _usersSlice$actions.decrement,
+    incrementByAmount = _usersSlice$actions.incrementByAmount,
+    setUsers = _usersSlice$actions.setUsers; // 模拟异步返回数据
+
+exports.incrementByAmount = incrementByAmount;
+exports.decrement = decrement;
+exports.increment = increment;
+
+var _callQueryResult = function _callQueryResult() {
+  var start = new Date().getTime();
+
+  function _generateRandomNumber() {
+    return Math.floor(Math.random() * 1000); //生成0到100之间的随机数
+  }
+
+  return new Promise(function (resolve) {
+    console.log('%c\n--------响应开始--------', 'color:green;');
+    setTimeout(function () {
+      var end = new Date().getTime();
+      var arr = [];
+
+      for (var index = 0; index < 5; index++) {
+        arr.push(_generateRandomNumber());
+      }
+
+      console.log("%c--------\u54CD\u5E94\u7ED3\u675F--------\n\u8017\u65F6".concat(end - start, "ms\n").concat(arr), 'color:red;');
+      resolve(arr);
+    }, 1000);
+  });
+};
+
+var fetchUsers = function fetchUsers() {
+  return function _callee(dispatch) {
+    var data;
+    return regeneratorRuntime.async(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return regeneratorRuntime.awrap(_callQueryResult());
+
+          case 2:
+            data = _context.sent;
+            // 派发action，更新state.list
+            dispatch(setUsers(data));
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    });
+  };
+}; // 4. 以按需导出的方式导出actionCreater
+
+
+exports.fetchUsers = fetchUsers;
+// 5. 以默认导出的方式导出reducer
+var _default = usersSlice.reducer;
+exports["default"] = _default;

redux/redux-reactRedux-toolkit-pure/src/store/modules/users.js

@@ -1,5 +1,4 @@
 import { createSlice } from '@reduxjs/toolkit';
-// 2. 创建一个名为users的slice
 const usersSlice = createSlice({
 	 name: 'users',
 	 initialState: {
@@ -7,29 +6,25 @@ const usersSlice = createSlice({
 		 count: 0,
 	 },
 	 reducers: {
-		// 定义一个名为increment的action 因为是同步方法 支持直接修改state
-		increment: (state) => {
-			// 更新state.count为state.count + 1
-			state.count++;
+		increment: (state,action) => {
+			console.log(action)
+			state.count++
+			
 		},
 		decrement: (state) => {
-			// 更新state.count为state.count - 1
 			state.count--;
 		},
-		// 定义一个名为incrementByAmount的action
 		incrementByAmount: (state, action) => {
-			// 更新state.count为state.count + action.payload
+			console.log(action.payload)
 			state.count += action.payload;
 		},
-	   // 定义一个名为setUsers的action
 		setUsers: (state, action) => {
-	     // 更新state.list为action.payload
 			state.list = action.payload;
 		},
 	 },
 })
-// 3. 解构出来的actionCreater函数
-const { increment, decrement, incrementByAmount, setUsers } = usersSlice.actions;
+// 3. 解构actions
+const { increment, decrement, incrementByAmount, setUsers} = usersSlice.actions;
 
 // 模拟异步返回数据
 const _callQueryResult = () => {
@@ -42,7 +37,6 @@ const _callQueryResult = () => {
     setTimeout(() => {
       const end = new Date().getTime();
       let arr = []
-	   // 生成五个随机数
       for (let index = 0; index < 5; index++) {
         arr.push(_generateRandomNumber())
       }
@@ -51,7 +45,6 @@ const _callQueryResult = () => {
     }, 1000)
   })
 }
-// 异步请求数据
 const fetchUsers = () => async (dispatch) => {
 	 // 发送异步请求
 	 const data = await _callQueryResult();