2019獨角獸企業重金招聘Python工程師標準>>>

此書講得蠻詳細，

從Flux一步一步過渡到Redux。

寫過的代碼舍不得扔，

立此存照吧。

我有幾張阿里云幸運券分享給你，用券購買或者升級阿里云相應產品會有特惠驚喜哦！把想要買的產品的幸運券都領走吧！快下手，馬上就要搶光了。

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';import ControlPanel from './views/ControlPanel'; import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<ControlPanel />, document.getElementById('root')); registerServiceWorker();

AppDispatcher.js

?

import {Dispatcher} from 'flux';export default new Dispatcher();

ActionTypes.js

?

export const INCREMENT = 'increment'; export const DECREMENT = 'decrement';

Actions.js

?

import * as ActionTypes from './ActionTypes'; import AppDispatcher from './AppDispatcher';export const increment = (counterCaption) => {AppDispatcher.dispatch({type: ActionTypes.INCREMENT,counterCaption: counterCaption}); };export const decrement = (counterCaption) => {AppDispatcher.dispatch({type: ActionTypes.DECREMENT,counterCaption: counterCaption}); };

CounterStore.js

?

import AppDispatcher from '../AppDispatcher'; import * as ActionTypes from '../ActionTypes'; import {EventEmitter} from 'events';const CHANGE_EVENT = 'changed';const counterValues = {'First': 0,'Second': 10,'Third': 30 };const CounterStore = Object.assign({}, EventEmitter.prototype, {getCounterValues: function() {return counterValues;},emitChange: function() {this.emit(CHANGE_EVENT);},addChangeListener:function(callback) {this.on(CHANGE_EVENT, callback);},removeChangeListener: function(callback) {this.removeListener(CHANGE_EVENT, callback);} });CounterStore.dispatchToken = AppDispatcher.register((action)=> {if (action.type === ActionTypes.INCREMENT) {counterValues[action.counterCaption]++;CounterStore.emitChange();} else if (action.type === ActionTypes.DECREMENT) {counterValues[action.counterCaption]--;CounterStore.emitChange();} });export default CounterStore;

SummaryStore.js

?

import AppDispatcher from '../AppDispatcher'; import * as ActionTypes from '../ActionTypes'; import CounterStore from './CounterStore'; import {EventEmitter} from 'events';const CHANGE_EVENT = 'changed';function computerSummary(counterValues) {let summary = 0;for (const key in counterValues) {if (counterValues.hasOwnProperty(key)) {summary += counterValues[key];}}return summary; }const SummaryStore = Object.assign({}, EventEmitter.prototype, {getSummary: function() {return computerSummary(CounterStore.getCounterValues());},emitChange: function() {this.emit(CHANGE_EVENT);},addChangeListener: function(callback) {this.on(CHANGE_EVENT, callback);},removeChangeListener: function(callback) {this.removeListener(CHANGE_EVENT, callback);} });SummaryStore.dispatchToken = AppDispatcher.register((action) => {if ((action.type === ActionTypes.INCREMENT) ||(action.type === ActionTypes.DECREMENT)) {AppDispatcher.waitFor([CounterStore.dispatchToken]);SummaryStore.emitChange();} });export default SummaryStore;

CounterPanel.js

?

import React, { Component } from 'react'; import Counter from './Counter'; import Summary from './Summary';const style = {margin: '20px' };class ControlPanel extends Component {render() {return (<div style={style}><Counter caption="First" /><Counter caption="Second" /><Counter caption="Third" /><hr /><Summary /></div>);} }export default ControlPanel;

Counter.js

?

import React, { Component } from 'react'; import PropTypes from 'prop-types';import * as Actions from '../Actions.js'; import CounterStore from '../stores/CounterStore.js';const buttonStyle = {margin: '10px' };const propTypes = {caption: PropTypes.string.isRequired };class Counter extends Component {constructor(props) {super(props);this.onClickIncrementButton = this.onClickIncrementButton.bind(this);this.onClickDecrementButton = this.onClickDecrementButton.bind(this);this.onChange = this.onChange.bind(this);this.state = {count: CounterStore.getCounterValues()[props.caption]}}shouldComponentUpdate(nextProps, nextState) {return (nextProps.caption !== this.props.caption) ||(nextState !== this.state.count);}componentDidMount() {CounterStore.addChangeListener(this.onChange);}componentWillUnmout() {CounterStore.removeChangeListener(this.onChange);}onChange() {const newCount = CounterStore.getCounterValues()[this.props.caption];this.setState({count: newCount});}onClickIncrementButton() {Actions.increment(this.props.caption);}onClickDecrementButton() {Actions.decrement(this.props.caption);}render() {const {caption} = this.props;return (<div><button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button><button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button><span> { caption } count: {this.state.count}</span></div>);} }Counter.defaultProps = {initValue: 0,onUpdate: f => f }; Counter.propTypes = propTypesexport default Counter;

?

Summary.js

?

import React, {Component} from 'react'; import SummaryStore from '../stores/SummaryStore';class Summary extends Component {constructor(props) {super(props);this.onUpdate = this.onUpdate.bind(this);this.state = {sum: SummaryStore.getSummary()}}componentDidMount() {SummaryStore.addChangeListener(this.onUpdate);}componentWillUnmount() {SummaryStore.removeChangeListener(this.onUpdate);}onUpdate() {this.setState({sum: SummaryStore.getSummary()})}render() {return (<div>Total Count: {this.state.sum}</div>);} }export default Summary; 閱讀原文

http://click.aliyun.com/m/36077/

轉載于:https://my.oschina.net/u/3637633/blog/1584525

總結

以上是生活随笔為你收集整理的实操《深入浅出React和Redux》第二期—Flux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。