实操《深入浅出React和Redux》第四期--react-redux

入到第四期，

代码大大简化，

但如果没有前面的演化过程，

一定让人蒙圈~~

三个主要文件：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';import './index.css';import ControlPanel from './views/ControlPanel';
import store from './Store';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<Provider store={store}><ControlPanel /></Provider>, document.getElementById('root'));
registerServiceWorker();

Counter.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';import * as Actions from '../Actions.js';const buttonStyle = {margin: '10px'
};const propTypes  = {caption: PropTypes.string.isRequired
};function Counter({caption, onIncrement, onDecrement, value}){return (<div><button style={buttonStyle} onClick={onIncrement}>+</button><button style={buttonStyle} onClick={onDecrement}>-</button><span> { caption }  count: {value}</span></div>);}Counter.propTypes  = {caption: PropTypes.string.isRequired,onIncrement: PropTypes.func.isRequired,onDecrement: PropTypes.func.isRequired,value: PropTypes.number.isRequired
};function mapStateToProps(state, ownProps) {return {value: state[ownProps.caption]}
}function mapDispatchToProps(dispatch, ownProps) {return {onIncrement: () => {dispatch(Actions.increment(ownProps.caption));},onDecrement: () => {dispatch(Actions.decrement(ownProps.caption));}}
}export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Summary.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';function Summary ({value}) {return (<div>Total Count: {value}</div>);
}Summary.propTypes  = {value: PropTypes.number.isRequired
};function mapStateToProps(state){let sum = 0;for (const key in state) {if (state.hasOwnProperty(key)) {sum += state[key];}}return {value: sum};
}export default connect(mapStateToProps)(Summary);

实操《深入浅出React和Redux》第四期--react-redux相关推荐

【React】React全家桶（四）React脚手架
文章目录 1 使用create-react-app创建react应用 1.1 React脚手架 1.2.创建项目并启动 1.3 react脚手架项目结构 1.4 组件化编码流程 2 脚手架版 Hell ...
RabbitMQ第四个实操小案例——DirectExchange
文章目录 RabbitMQ第四个实操小案例--DirectExchange RabbitMQ第四个实操小案例--DirectExchange DirectExchange:这种交换机的模式跟前面的Fo ...
史上最高效Shell四剑客实操案例
01.Shell编程四剑客之Find 通过如上基础语法的学习,读者对Shell编程有了更近一步的理解,Shell编程不再是简单命令的堆积,而是演变成了各种特殊的语句.各种语法.编程工具.各种命令的集合 ...
wireshark分析tcp协议（二）四次挥手（异常情况）【理论 + 实操】
上一章:wireshark分析tcp协议(一)三次握手[理论 + 实操] 在完成对三次握手的抓包后,间隔了一段时间,来进行四次挥手的抓包. 知识背景问题一:为什么要四次挥手呢? 在上一章的三次挥手中 ...
Python学习笔记7：实操案例四（支付密码的验证，模拟QQ账号登录，商品价格竞猜，星座看运势）
Python学习笔记7:实操案例四(支付密码的验证,模拟QQ账号登录,商品价格竞猜,星座看运势) 1.支付密码的验证: 这个主要就是调用isdigit()函数判断字符串是不是全是数字组成. pwd=i ...
Python学习笔记17：实操案例十四（模拟高铁售票系统，推算几天后的日期）
Python学习笔记17:实操案例十四(模拟高铁售票系统,推算几天后的日期) 1.模拟高铁售票系统使用漂亮的表格模块PrettyTable 这个模块需要预先安装,不然直接导入会报错: 安装办法: h ...
DIV+CSS实操四：经管系网页内容模块内容添加(一)
我们继续接着DIV+CSS实操系列:DIV+CSS实操一:经管系网页总体模块布局,DIV+CSS实操二:经管系网页添加导航栏和友情链接栏和DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息 ...
roc曲线的意义_实用！Biomarker表达差异图、ROC曲线amp;四格表的实操手册
解螺旋·蘑菇老师详细讲解biomarker研究在课题设计方面需要注意的一些共性问题,包括标本类型.样本收集以及病例资料三大部分. 本期课程则汇总了biomarker研究中的典型图表以形成"图 ...
AppArmor零知识学习十四、实操与实践（2）
本文内容参考: Linux安全模块AppArmor总结-CSDN博客, apparmor首页.文档和下载 - 应用程序访问控制系统 - OSCHINA - 中文开源技术交流社区, AppArmor · ...

实操《深入浅出React和Redux》第四期--react-redux

实操《深入浅出React和Redux》第四期--react-redux相关推荐

最新文章

热门文章