no message

2024-04-29 09:51:56 +08:00
parent baf4bef051
commit 23e3023f3d
8 changed files with 0 additions and 272 deletions
@@ -1,50 +0,0 @@
 import React,{Component} from 'react'
 import {connect} from 'react-redux'
 import {createIncreementAction,createDecreementAction,createIncreementAsyncAction} from '../../redux/count_action'
 class Count extends Component{
    increement=()=>{
        const {value}=this.selectNumber
        this.props.jia(value*1)
    }
    decreement=()=>{
        const {value}=this.selectNumber
        this.props.jian(value*1)
    }
    increementOdd=()=>{
        const {value}=this.selectNumber
        if(this.props.state.count%2!==0){
            this.props.jia(value*1)
        }
    }
    increementSync=()=>{
        const {value}=this.selectNumber
        this.props.jiaAsync(value*1,1000)
    }
    render(){
        return(
            <div>
                <h1>当前求和为：{this.props.state.count}</h1>
                <select name="" id="" ref={c=>this.selectNumber=c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increement}>+</button>
                <button onClick={this.decreement}>-</button>
                <button onClick={this.increementOdd}>计数再加</button>
                <button onClick={this.increementSync}>异步再加</button>
            </div>
        )
    }
 }
 const CountContainer=connect(
    state=>({state}),
    {
        jia:createIncreementAction,
        jian:createDecreementAction,
        jiaAsync:createIncreementAsyncAction,
    }
 )
 (Count)
 export default CountContainer
@@ -1,6 +0,0 @@
 const   INCREEMENT="increement"
 const   DECREEMENT="decreement"
 export {
    INCREEMENT,
    DECREEMENT
 }
@@ -1,26 +0,0 @@
 /*
 * @Author: chenxuan
 * @Date: 2022-07-07 00:09:50
 * @LastEditTime: 2022-07-07 00:50:42
 * @LastEditors: chenxuan
 */
 import {INCREEMENT,DECREEMENT} from './const'
 function createIncreementAction(data){
    return {type:INCREEMENT,data}
 }
 function createDecreementAction(data){
    return {type:DECREEMENT,data}
 }
 function createIncreementAsyncAction(data,time){
    // store调用createIncreementAsyncAction 能接收一个参数dispatch
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncreementAction(data))
        },time)
    }
 }
 export {
    createIncreementAction,
    createDecreementAction,
    createIncreementAsyncAction
 }
@@ -1,18 +0,0 @@
 /*
 * @Author: chenxuan
 * @Date: 2022-06-25 16:54:25
 * @LastEditTime: 2022-07-07 00:46:47
 * @LastEditors: chenxuan
 */
 export default function countReducer(preState=100,action){
    const {type,data}=action
    switch(type){
        case "increement":
            return preState+data
        case "decreement":
            return preState-data
        default:
            return preState    
    }
 }
@@ -1,30 +0,0 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", {
  value: true
 });
 exports["default"] = countReducer;
 /*
 * @Author: chenxuan
 * @Date: 2022-06-25 16:54:25
 * @LastEditTime: 2022-07-07 00:46:47
 * @LastEditors: chenxuan
 */
 function countReducer() {
  var preState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
  var action = arguments.length > 1 ? arguments[1] : undefined;
  var type = action.type,
      data = action.data;
  switch (type) {
    case "increement":
      return preState + data;
    case "decreement":
      return preState - data;
    default:
      return preState;
  }
 }
@@ -1,26 +0,0 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", {
  value: true
 });
 exports["default"] = void 0;
 var _toolkit = require("@reduxjs/toolkit");
 var _count_reducer = _interopRequireDefault(require("./count_reducer"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /*
 * @Author: chenxuan
 * @Date: 2022-06-25 16:54:00
 * @LastEditTime: 2022-07-06 23:49:24
 * @LastEditors: chenxuan
 */
 var store = (0, _toolkit.configureStore)({
  reducer: {
    count: _count_reducer["default"]
  }
 });
 var _default = store;
 exports["default"] = _default;
@@ -1,14 +0,0 @@
 /*
 * @Author: chenxuan
 * @Date: 2022-06-25 16:54:00
 * @LastEditTime: 2022-07-06 23:49:24
 * @LastEditors: chenxuan
 */
 import { configureStore } from "@reduxjs/toolkit"
 import countReducer from './count_reducer'
 const store=configureStore({
    reducer:{
        count:countReducer
    }
 })
 export default store;
@@ -1,102 +0,0 @@
 "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");
 // 2. 创建一个名为users的slice
 var usersSlice = (0, _toolkit.createSlice)({
  name: 'users',
  initialState: {
    list: [],
    count: 0
  },
  reducers: {
    // 定义一个名为increment的action 因为是同步方法 支持直接修改state
    increment: function increment(state) {
      // 更新state.count为state.count + 1
      state.count++;
    },
    decrement: function decrement(state) {
      // 更新state.count为state.count - 1
      state.count--;
    },
    // 定义一个名为incrementByAmount的action
    incrementByAmount: function incrementByAmount(state, action) {
      // 更新state.count为state.count + action.payload
      state.count += action.payload;
    },
    // 定义一个名为setUsers的action
    setUsers: function setUsers(state, action) {
      // 更新state.list为action.payload
      state.list = action.payload;
    }
  }
 }); // 3. 解构出来的actionCreater函数
 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;