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

天飞 2017-12-03 22:34:20 浏览14 评论0

react redux js string index 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);

版权声明：本文内容由互联网用户自发贡献，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：yqgroup@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

用云栖社区APP，舒服~

【云栖快讯】2017互联网超级工程阿里双11完美落幕，交易额突破1682亿，但阿里工程师如何玩转“超级工程”，背后黑科技又是如何？12月13-14日，12位大咖直播分享揭秘1682亿背后技术实践，马上预约  详情请点击 评论文章 (0) (0) (0)

相关文章

网友评论