实操《深入浅出React和Redux》第三期--Redux

天飞 2017-12-03 22:07:59 浏览17 评论0

react redux string Render BIND

摘要： 尽管还没有到react-redux，但感觉已经很兴奋啦。 前端工程组件化编程思想， 确实也经历过越来越多的场景， 也越来越标准了。 这里涉及的是redux的基础应用，傻瓜和聪明组件，全局context。

尽管还没有到react-redux，但感觉已经很兴奋啦。

前端工程组件化编程思想，

确实也经历过越来越多的场景，

也越来越标准了。

这里涉及的是redux的基础应用，傻瓜和聪明组件，全局context。

就不完全收录代码了。

十点过了嘛~~

这里只记录几个重要的点吧。

Provider.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import ControlPanel from './views/ControlPanel';
import store from './Store';
import Provider from './Provider';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
	<Provider store={store}>
		<ControlPanel />
	</Provider>, document.getElementById('root'));
registerServiceWorker();

Reducer.js

import * as ActionTypes from './ActionTypes';

export default (state, action) => {
	const {counterCaption} = action;
	
	switch (action.type) {
		case ActionTypes.INCREMENT:
			return {...state, [counterCaption]: state[counterCaption] + 1};
		case ActionTypes.DECREMENT:
			return {...state, [counterCaption]: state[counterCaption] - 1};
		default:
			return state
	}
}

Store.js

import {createStore} from 'redux';
import reducer from './Reducer';

const initValues = {
	'First': 0,
	'Second': 10,
	'Third': 20
};

const store = createStore(reducer, initValues);

export default store;

Counter.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import * as Actions from '../Actions.js';

const buttonStyle = {
	margin: '10px'
};

const propTypes  = {
	caption: PropTypes.string.isRequired
};

class Counter extends Component {
	render() {

		const {caption, onIncrement, onDecrement, value} = this.props;
		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
};

class CounterContainer extends Component {
	constructor(props, context) {
		super(props, context);
		
		this.onIncrement = this.onIncrement.bind(this);
		this.onDecrement = this.onDecrement.bind(this);
		this.onChange = this.onChange.bind(this);
		this.getOwnState = this.getOwnState.bind(this);
		this.state = this.getOwnState();
	}
	
	shouldComponentUpdate(nextProps, nextState) {
		return (nextProps.caption !== this.props.caption) ||
				(nextState.value !== this.state.value);
	}
	
	componentDidMount() {
		this.context.store.subscribe(this.onChange);
	}
	
	componentWillUnmout() {
		this.context.store.unsubscribe(this.onChange);
	}
	
	onChange() {
		this.setState(this.getOwnState());
	}
	
	getOwnState() {
		return {
			value: this.context.store.getState()[this.props.caption]
		};
	}
	
	onIncrement() {
		this.context.store.dispatch(Actions.increment(this.props.caption));
	}
	onDecrement() {
		this.context.store.dispatch(Actions.decrement(this.props.caption));
	}
	
	render() {
		return <Counter caption={this.props.caption}
			onIncrement={this.onIncrement}
			onDecrement={this.onDecrement}
			value={this.state.value} />
	}
}

CounterContainer.propTypes  = {
	caption: PropTypes.string.isRequired
};
CounterContainer.contextTypes = {
	store: PropTypes.object
}

export default CounterContainer;

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

用云栖社区APP，舒服~

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

相关文章

网友评论