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

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