no message
This commit is contained in:
chenxuan
@@ -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;
|
||||
Reference in New Issue
Block a user