react学习——25redux实现求和案例(完整版)

1、目录结构
在这里插入图片描述
2、count/index.js

import React, {Component} from "react";
//引入store,用于获取数据
import store from '../../redux/store'
//引入actionCreator 专门创建action对象
import {createDecrementAction,createIncrementAction} from '../../redux/count_action'export default class Count extends Component {state = {count:store.getState()}componentDidMount() {//监测redux中的数据的变化,只要改变,就会调用renderstore.subscribe(()=>{this.setState({count:store.getState()})})}//加法increment=()=>{const {value} = this.selectNum//通知redux 改变// store.dispatch({type:'increment',data:parseInt(value)})store.dispatch(createIncrementAction(parseInt(value)))}//减法decrement=()=>{const {value} = this.selectNumstore.dispatch(createDecrementAction(parseInt(value)))}//奇数加incrementIfOdd=()=>{const {value} = this.selectNumconst {count} = this.stateif(count%2!==0){store.dispatch(createIncrementAction(parseInt(value)))}}//异步加incrementAsync=()=>{const {value} = this.selectNumsetTimeout(()=>{store.dispatch(createIncrementAction(parseInt(value)))},500)}render(){return(<div><h1>当前求和为:{store.getState()}</h1><select ref={(c)=>this.selectNum=c}><option value="1">1</option><option value="2">2</option><option value='3'>3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>当前求和为奇数在加</button>&nbsp;<button onClick={this.incrementAsync}>异步加</button>&nbsp;</div>);}}

2、redux/constant.js

/*该模块用于定义状态管理的常量名称,目的只有一个:便于管理的同时,防止程序员单词拼写错误
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

redux/count_action.js

/*该文件专门为Count组件生成action对象*/
import {INCREMENT,DECREMENT} from './constant'
// function createIncrementAction(data){
//     return {type:'increment',data}
// }
export const createIncrementAction = data=>({type:INCREMENT,data})
// function createDecrementAction(data){
//     return {type:'decrement',data}
// }
export const createDecrementAction = data=>({type:DECREMENT,data})// export default {
//     createIncrementAction,
//     createDecrementAction
// }

redux/count_reducer.js

/*1.该文件是用于创建一个为count服务的reducer,reducer的本质就是一个函数2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
*/
import {INCREMENT,DECREMENT} from "./constant";const initState = 0
export default function countReducer(preState=initState,action) {console.log('countReducer',preState,action)const {type,data} = action// 根据type决定如何加工数据switch (type){case INCREMENT:console.log('@')return preState + datacase DECREMENT:return preState - datadefault:return preState}
}

/redux/store.js

/*该文件专门用于创建一个为Count组件服务的store对象*/
//引入createStore,专门创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入cunter.redux.js文件
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

3、src/App.js

import React, {Component} from "react";
import Count from "./components/Count";
export default class App extends Component {render(){return(<div><Count></Count></div>);}
}

src/index.js

import React from "react";
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>,document.getElementById('root'))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/43120.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS【详解】边框 border,边框-圆角 border-radius,边框-填充 border-image,轮廓 outline

边框 border border 是以下三种边框样式的简写&#xff1a; border-width 边框宽度 —— 数值 px&#xff08;像素&#xff09;,thin&#xff08;细&#xff09;,medium&#xff08;中等&#xff09;,thick&#xff08;粗&#xff09;border-style 边框线型 —— none【默认值…

78. UE5 RPG 创建技能数据并初始化技能ui

在上一篇文章里&#xff0c;我们创建了技能的UI&#xff0c;接下来&#xff0c;我们要考虑如何实现对技能UI的填充&#xff0c;肯定不能直接写死&#xff0c;需要有一些方法去实现技能的更新。我们期望能够创建一个技能数据&#xff0c;然后根据数据通过回调的方式实现数据的更…

GET正常,POST获取不到数据

环境复现 前台&#xff1a; wx.request({url: xxxxxx,method: POST,header: {"content-type": "application/json"},success(res) {console.log(res);},fail(err) {console.error(网络请求失败, err);}}); 后端使用springboot&#xff1a; RequestMappin…

一键掌握天气动态 - 基于Vue和高德API的实时天气查询

前言 本文将学习如何使用Vue.js快速搭建天气预报界面,了解如何调用高德地图API获取所需的天气数据,并掌握如何将两者有机结合,实现一个功能丰富、体验出色的天气预报应用 无论您是前端新手还是有一定经验,相信这篇教程都能为您带来收获。让我们一起开始这段精彩的Vue.js 高德…

桌面悬浮备忘录哪个好?能在桌面悬浮使用的备忘app

备忘录是我们日常工作和生活中的常用工具&#xff0c;它帮助我们记录重要信息&#xff0c;提醒我们完成各项任务。而将备忘录悬浮在桌面上使用&#xff0c;无疑能进一步提高我们的工作效率。想象一下&#xff0c;在处理复杂的工作任务时&#xff0c;你能够随时在桌面上查看提醒…

C++原创娱乐系列抽搐的井号

玩法&#xff1a; 一次性输入大量w&#xff0c;s&#xff0c;a&#xff0c;d&#xff0c;然后即可欣赏抽搐的井号 上代码 #include"bits/stdc.h" #include"Windows.h" using namespace std; int main(){int w10,a10;char n;while(1){for(int i0;i<w;…

JS获取本机ip地址方法

前端获取本机ip地址&#xff1b;使用第三方免费API <script>function ipJson(ipJson) {console.log(获取到的网络IP,ipJson);//可以把结果存在window上&#xff0c;方便调用window.ipJson ipJson;} </script> <script src"https://whois.pconline.com.cn/…

产品使用手册深度剖析:五步快速敲定产品手册策划思路

引言 在这个信息爆炸的时代&#xff0c;产品使用手册不仅是产品的“说明书”&#xff0c;更是品牌与用户之间建立情感连接的桥梁。一份优秀的手册&#xff0c;能够迅速吸引用户的注意力&#xff0c;引导他们轻松上手&#xff0c;并深入体验产品的魅力。那么&#xff0c;如何撰…

ruoyi项目swagger文档升级knife4j文档

注释admin模块中的swagger依赖加入knife4j依赖 <!-- swagger3--> <!-- <dependency>--> <!-- <groupId>io.springfox</groupId>--> <!-- <artifactId>springfox-boot-starter</artifactId>--…

IDEA常用技巧荟萃:精通开发利器的艺术

1 概述 在现代软件开发的快节奏环境中&#xff0c;掌握一款高效且功能全面的集成开发环境&#xff08;IDE&#xff09;是提升个人和团队生产力的关键。IntelliJ IDEA&#xff0c;作为Java开发者的首选工具之一&#xff0c;不仅提供了丰富的编码辅助功能&#xff0c;还拥有高度…

flowable框架 6.8 自定义函数方法

为了比对流程中条件的checkbox&#xff0c;由于本身elui的checkbox是乱序的&#xff0c;所以需要这个自定义函数来判断 环境&#xff1a;jdk1.8 flowable6.8 springboot2 1.自定义函数 import org.springframework.stereotype.Component;import java.util.Arrays; import ja…

预算有限?如何挑选经济适用的安全管理系统?

如今&#xff0c;无论是信息安全、生产安全还是人员安全&#xff0c;都直接关系到企业的稳定运营和长远发展。然而&#xff0c;对于许多中小企业而言&#xff0c;高昂的安全管理系统投入往往成为一大难题。那么&#xff0c;在预算有限的情况下&#xff0c;如何挑选一款既经济适…

Github 2024-07-07php开源项目日报 Top9

根据Github Trendings的统计,今日(2024-07-07统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目9Blade项目2JavaScript项目1Laravel:表达力和优雅的 Web 应用程序框架 创建周期:4631 天开发语言:PHP, BladeStar数量:75969 个Fork数…

如何整合生成的人工智能?(GenAI)为你未来的工作增加动力

生成人工智能(GenAI)它发展迅速&#xff0c;以前所未有的速度取得了突破。人工智能将继续改变各行各业&#xff0c;预计2023年至2030年的年增长率将达到37.3%。由于一种新的知识工作者现在面临被取代的风险&#xff0c;生成式人工智能的惊人崛起进一步加剧了这种紧迫性。据《未…

如何快速学好一门新技术

目录 学习步骤 1. 基本了解 2. 快速上手 3. 系统学习 4. 主动运用 5. 了解原理 6. 深入源码 7. 修改源码 8. 推陈出新 学到哪一步? 无论学习任何编程技术,都可以遵循以下步骤: 学习步骤 1. 基本了解 首先了解这项技术的用途、优缺点及适用场景。建议通过网上的经…

Apache Hadoop文件上传、下载、分布式计算案例初体验

上篇&#xff1a;Apache Hadoop完全分布式集群搭建无坑指南-CSDN博客 通过上篇&#xff0c;我们搭建了完整的Hadoop集群&#xff0c;此篇我们简单通过集群上传和下载文件&#xff0c;同时测试分布式worldCount案例。后续的篇章再对分布式计算、分布式存储作更深的理解。 上传…

嘎嘎详细的三维变换详细讲解,包括视图变换、投影变换等,超级通俗易懂!

前置二维空间的各种变换笔记&#xff1a;二维变换 三维空间中的齐次坐标 从二维变换开始引申&#xff0c;可得到三维中的一个点的表达方式为 ( x , y , z , 1 ) ⊤ (\mathbf{x}, \mathbf{y}, \mathbf{z}, 1)^{\top} (x,y,z,1)⊤&#xff0c;也就是w1&#xff0c;而三维的向量…

插入排序算法(C语言版)

直接插入排序 插入排序&#xff08;insert sort&#xff09;是一种简单的排序算法&#xff0c;它的工作原理与手动整理一副牌的过程非常相似。 具体来说&#xff0c;我们在未排序区间选择一个基准元素&#xff0c;将该元素与其左侧已排序区间的元素逐一比较大小&#xff0c;并…

如何用 Python 绕过 cloudflare(5秒盾) 抓取数据:也不是很难嘛!

大家好!我是爱摸鱼的小鸿,关注我,收看每期的编程干货。 逆向是爬虫工程师进阶必备技能,当我们遇到一个问题时可能会有多种解决途径,而如何做出最高效的抉择又需要经验的积累。本期文章将以实战的方式,带你全面了解 cloudflare(5秒盾) 以及如何绕过使用 cloudflare 服务…

(自用)gtest单元测试

gtest是Google的一套用于编写C测试的框架&#xff0c;可以运行在很多平台上&#xff08;包括Linux、Mac OS X、Windows、Cygwin等等&#xff09;。基于xUnit架构。支持很多好用的特性&#xff0c;包括自动识别测试、丰富的断言、断言自定义、死亡测试、非终止的失败、生成XML报…