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

2019独角兽企业重金招聘Python工程师标准>>>

尽管还没有到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;

转载于:https://my.oschina.net/u/3637633/blog/1584542