技术标签: react.js 前端 React javascript
开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。
尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描述界面的状态,Redux可以发射状态的更新, 让他们作出相应; 目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去。
这里我创建了两个组件:
Home组件:其中会展示当前的counter值,并且有一个+1和+5的按钮;
Profile组件:其中会展示当前的counter值,并且有一个-1和-5的按钮;
首先将结构搭建出来, 然后安装redux库: npm i redux
安装完成后, 安装我们上一篇文章讲解的目录结构, 创建Store文件夹
store/index.js 中创建store
import {
createStore } from "redux";
import reducer from "./reducer";
const store = createStore(reducer)
export default store
store/constants.js 中定义变量
export const CHANGE_NUM = "change_num"
store/reducer.js
import {
CHANGE_NUM } from "./constants"
const initialState = {
counter: 10
}
export default function reducer(state = initialState, action) {
switch(action.type) {
case CHANGE_NUM:
return {
...state, counter: state.counter + action.num}
default:
return state
}
}
store/actionCreators.js
import {
CHANGE_NUM } from "./constants"
export const changeNumAction = (num) => ({
type: CHANGE_NUM,
num
})
store中编写完成后, 在Home和Profile页面中使用store中的state, 核心代码主要是两个:
在 componentDidMount 中监听store的变化,当数据发生变化时重新设置 counter;
在发生点击事件时,调用store的dispatch来派发对应的action;
import React, {
PureComponent } from 'react'
import store from '../store'
import {
changeNumAction } from '../store/actionCreators'
export class Home extends PureComponent {
constructor() {
super()
this.state = {
counter: store.getState().counter
}
}
// 核心一: 在componentDidMount中监听store的变化,当数据发生变化时重新设置 counter;
componentDidMount() {
store.subscribe(() => {
const state = store.getState()
this.setState({
counter: state.counter })
})
}
// 核心二: 在发生点击事件时,调用store的dispatch来派发对应的action;
changeNum(num) {
store.dispatch(changeNumAction(num))
}
render() {
const {
counter } = this.state
return (
<div>
<h2>Home</h2>
<h2>当前计数: {
counter} </h2>
<button onClick={
() => this.changeNum(1)}>+1</button>
<button onClick={
() => this.changeNum(5)}>+5</button>
</div>
)
}
}
export default Home
import React, {
PureComponent } from 'react'
import store from '../store'
import {
changeNumAction } from '../store/actionCreators'
export class Profile extends PureComponent {
constructor() {
super()
this.state = {
counter: store.getState().counter
}
}
componentDidMount() {
store.subscribe(() => {
const state = store.getState()
this.setState({
counter: state.counter })
})
}
changeNum(num) {
store.dispatch(changeNumAction(num))
}
render() {
const {
counter } = this.state
return (
<div>
<h2>Profile</h2>
<h2>当前计数: {
counter}</h2>
<button onClick={
() => this.changeNum(-1)}>-1</button>
<button onClick={
() => this.changeNum(-5)}>-5</button>
</div>
)
}
}
export default Profile
我们发现Home组件和Profile组件中的代码是大同小异的, 所以这不是我们最终编写的代码, 后面还会对代码进行优化
文章浏览阅读713次。https://aixcoder.com/#/localServer法1:将解压缩后「server」目录下的所有文件,手动移动到 C:\Users\24390\aiXcoder\installer\localserver2\current\server下(24390是我的用户文件夹名)法2:直接运行install_localserver.bat文件..._aixcoder-0.1.12-comm
文章浏览阅读317次。# 0 is too far from ` ;)set -g base-index 1# Automatically set window title#set-window-option -g automatic-rename on#set-option -g set-titles on# Send prefixset-option -g prefix C-a unbind-k..._# switch panes using alt-arrow without prefix
文章浏览阅读586次。创建于 2012-05-08迁移自个人的百度空间--------------------------------首先机子要装有oracle驱动程序(在装oracle服务器端或客户端就自动安装上的oracle的驱动程序) 然后依据下面步骤:1、database->generate database 2、general->Direct generation 如果没有..._powerdesigner生成oracle表
文章浏览阅读167次。Collections是一个可以操作set map list的工具类常用方法:T 19:57:25●排序操作: (均为static方 法)➢reverse(List):反转List中元素的顺序➢shuffle(List):对List集合元素进行随机排序➢sort(List):根据元素的自然顺序对指定List 集合元素按升序排序➢sort(List,Comparator): 根据指定..._java 容器工具类
文章浏览阅读3.5k次,点赞5次,收藏4次。第3部分 软件研发工作总结同行评审 在《浪潮之巅》这本书中,吴军老师描述了在Google早期的工作方式,其中有一段是这么写的:我一般会在吃完晚饭后把代码修改的清单发给克雷格做代码审核,他一般晚上10点左右会回复我,给我修改意见,详细到某一行多了一个空格。 吴军老师所描述的内容,其实就是软件开发中的同行评审流程。 几乎在所有的软件项目中,都需要同行评审。_代码同级评审
文章浏览阅读3.1k次。前言一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。性能瓶颈在哪里?先看一下常见的vue写法:在html里放一..._vue 应用性能优化指南
文章浏览阅读2k次,点赞4次,收藏6次。文章目录nmap命令语法格式:常用参数:参考实例:nc命令语法格式:常用参数:参考实例:nmap命令nmap (“Network Mapper(网络映射器)”) 是一款开放源代码的 网络探测和安全审核的工具。它的设计目标是快速地扫描大型网络,当然用它扫描单个 主机也没有问题。Nmap以新颖的方式使用原始IP报文来发现网络上有哪些主机,那些主机提供什么服务(应用程序名和版本),那些服务运行在什么操作系统(包括版本信息), 它们使用什么类型的报文过滤器/防火墙,以及一堆其它功能。虽然Nmap通常用于安全审核_nmap 和 nc
文章浏览阅读346次。现如今,随着经济的不断发展,社会的不断进步,企业模式的不断转型,越来越多的业务需要发票进行报销,也正是随着发票的普及,越来越多的假发票混入我们的生活,一些不法分子以此为商机,制售假发票为他人报销提供非正常途径。为防止假发票、问题发票入账,企业要求财务工作者在接收到发票时必须做到“先查验、后报销、再入账”,但如此一来,企业产生的海量发票无疑增加了财务人员的工作量。对于发票查验量小的企业而言,可以通过上税务局官网的方式一张一张免费进行查询,但对于发票查验需求量大的企业而言,传统人工查验的方式不仅速度慢、效率低_发票查验api是免费的吗
文章浏览阅读4.5k次。1、修改oracle安装包内refhost.xml文件2、修改oracle安装包内oraparam.in文件3、以兼容模式运行这个程序,并选择 windows xp(service pack 3)4、以管理员身份运行_error in process: e:\oracle\product\19.3.0.0\db_1\bin\orapwd.exe
文章浏览阅读5.7k次。1.x disruptor框架介绍与Hello World2.x disruptor 详细说明与使用3.x disruptor 应用(并发场景实例讲解)1.1 Disruptor并发框架简介Martin Fowler在自己网站上写了一篇LMAX架构的文章,在文章中他介绍了LMAX是一种新型零售金融交易平台,它能够以很低的延迟产生大量交易。这个系统是建立在JVM平台上,其核心是一个业..._disruptor
文章浏览阅读122次。高毅资产在二季度仍是当之无愧的“持有王”,不仅延续一季度对海康威视、紫光国微、紫金矿业和睿创微纳的青睐,还新进了天山铝业、恒立液压、华润三九、久立特材和西部超导等5只个股。据数据显示,二季度高毅资产持有24只个股,合计持有市值为374.42亿元,其中,持有的海康威视市值就高达138.68亿元;其次,持有的紫金矿业市值达68.35亿元;从持股量或持有市值来看,高毅资产均居首位。同时,玄元投资和迎水投资也在同期持有不少个股。玄元投资二季度持有三棵树、中泰化学、伊之密、聚隆科技和沃尔核材等17只个股,合计
文章浏览阅读594次。场景:tomcat执行startup.bat的时候,会寻找全局环境变量CATALINA_HOME,如果CATALINA_HOME对应的tomcat目录不是当前tomcat的目录,则就会启动报错,解决方法如下:1、打开bin目录下的startup.bat文件,添加如下代码:这样的话,当前tomcat启动时,就会使用当前的tomcat,而不会去使用环境变量CATALINA_HOM..._linux 启动tomcat 不使用系统变量catalina_home