React: 研究Flux设计模式
一、简介
一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序。然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露出臃肿的弊端,state中大量的数据放在根组件,而且与UI联系紧密,明显会增加系统的维护成本。此时,最明智的做法就是将State数据和自身的层级进行隔离,独立于UI之外。在React外部管理State,可以大量减少类组件的使用,如果不是特别需要生命周期函数,进而转用无状态函数组件,将类的功能与HOC隔离,从而确保组件只包含无状态的UI。由于无状态函数组件是纯函数,所以构架的函数式应用程序非常容易测试。基于这种理念,Facebook团队开发了一种新的设计模式Flux。Flux设计的目的就是保持数据单向流动,它囊括四个组成部分,分别是Store、Action、Dispatcher、View,单向联系,职责不同。在Flux中,应用程序的State数据就是存放到React之外的Store中进行管理的。具体的就是说,Store保存或者修改数据,是唯一可以更新视图的入口;Action则是封装用户的操作指令和需要更新的目标数据;Dispatcher的用途是将接收的Action排队并逐一分发到相应的Store中;View就是视图层了,根据Store中State数据进行更新。注意Action和State一样,都是不可变的数据,Action来源可以是View,也可以是其他源地址,一般是Web服务器。整个数据单向流程图如下所示:
二、View
在Flux中一般用无状态函数式组件表示,Flux会管理应用的State,所以除非特别需要用到生命周期函数,否则不推荐使用类组件。示例如下:
//使用函数式组件创建一个倒计时组件 //倒计时应用的View会将计数作为属性获取。它还会接收一对函数:tick和reset,这对函数定义在下面的Action中。 //当View渲染它之后会显示倒计时,除非值为0,否则会显示点击文案。如果计数值不是0,那么超时函数一秒后执行tick函数。 //当计数值为0时,View不会被任何Action生成器触发,除非用户点击了调起重置reset函数,再次进入倒计时。 const TimeCountDown = ({count, tick, reset}) => { if (count){ setTimeout(() => tick(), 1000); } return (count) ? <h1>{count}</h1> : <div onClick={() => reset(10)}> <span>(click to start over)</span> </div> };
三、Action
Action提供的指令和数据主要是Store用来修改State的。Action生成器就是函数,主要用来构造某个Action的具体细节。Action本身是由若干对象构成,并且至少包含一个类型字段用来区分。Action类型一般通过一个大写字母组成的字符串定义type类型。Action也可能打包了任何Store所需的数据,示例如下:
//当倒计时Action生成器被载入时,dispatcher会作为一个参数传递给它。每次某个TICK或者RESET函数被调用时, //dispatcher的handleAction方法也会被调用,以便"调度"Action对象。 const timeCountDownActions = dispatcher => ({ tick() { dispatcher.handleAction({type: 'TICK'}) }, reset(count){ dispatcher.handleAction({ type: 'RESET', count }) } });
四、Dispatcher
Dispatcher在应用程序中一直就只有一个存在。它表示设计模式中的空中管理中心。Dispatcher接收到Action,将与之有关的某些生成源信息一并打包,然后将它发送到相应的Store或者一系列Store中,以便处理这个Action。Dispatcher分派器用于将有效负载广播到已注册的回调。 这与通用的pub-sub系统有两个不同之处:(1)回调未订阅特定事件。 每个有效负载都分派给每个已注册的回调。(2)回调可以全部或部分推迟,直到执行了其他回调为止。
API基本使用如下:
//例如,考虑以下假设的飞行目的地表格,当选择一个国家时,该表格将选择默认城市: var flightDispatcher = new Dispatcher(); //跟踪选择哪个国家 var CountryStore = {country: null}; //跟踪选择哪个城市 var CityStore = {city: null}; //跟踪选定城市的基本航班价格 var FlightPriceStore = {price: null} //注册更改所选城市这个有效负载: flightDispatcher.register(function(payload) { if (payload.actionType === 'city-update') { CityStore.city = payload.selectedCity; } }); //当用户更改所选城市时,我们将分派有效载荷: flightDispatcher.dispatch({ actionType: 'city-update', selectedCity: 'paris' });
详细API,类文件如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/** * Copyright (c) 2014-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule Dispatcher * @flow * @preventMunge */ 'use strict'; var invariant = require('invariant'); export type DispatchToken = string; var _prefix = 'ID_'; /** * Dispatcher is used to broadcast payloads to registered callbacks. This is * different from generic pub-sub systems in two ways: * * 1) Callbacks are not subscribed to particular events. Every payload is * dispatched to every registered callback. * 2) Callbacks can be deferred in whole or part until other callbacks have * been executed. * * For example, consider this hypothetical flight destination form, which * selects a default city when a country is selected: * * var flightDispatcher = new Dispatcher(); * * // Keeps track of which country is selected * var CountryStore = {country: null}; * * // Keeps track of which city is selected * var CityStore = {city: null}; * * // Keeps track of the base flight price of the selected city * var FlightPriceStore = {price: null} * * When a user changes the selected city, we dispatch the payload: * * flightDispatcher.dispatch({ * actionType: 'city-update', * selectedCity: 'paris' * }); * * This payload is digested by `CityStore`: * * flightDispatcher.register(function(payload) { * if (payload.actionType === 'city-update') { * CityStore.city = payload.selectedCity; * } * }); * * When the user selects a country, we dispatch the payload: * * flightDispatcher.dispatch({ * actionType: 'country-update', * selectedCountry: 'australia' * }); * * This payload is digested by both stores: * * CountryStore.dispatchToken = flightDispatcher.register(function(payload) { * if (payload.actionType === 'country-update') { * CountryStore.country = payload.selectedCountry; * } * }); * * When the callback to update `CountryStore` is registered, we save a reference * to the returned token. Using this token with `waitFor()`, we can guarantee * that `CountryStore` is updated before the callback that updates `CityStore` * needs to query its data. * * CityStore.dispatchToken = flightDispatcher.register(function(payload) { * if (payload.actionType === 'country-update') { * // `CountryStore.country` may not be updated. * flightDispatcher.waitFor([CountryStore.dispatchToken]); * // `CountryStore.country` is now guaranteed to be updated. * * // Select the default city for the new country * CityStore.city = getDefaultCityForCountry(CountryStore.country); * } * }); * * The usage of `waitFor()` can be chained, for example: * * FlightPriceStore.dispatchToken = * flightDispatcher.register(function(payload) { * switch (payload.actionType) { * case 'country-update': * case 'city-update': * flightDispatcher.waitFor([CityStore.dispatchToken]); * FlightPriceStore.price = * getFlightPriceStore(CountryStore.country, CityStore.city); * break; * } * }); * * The `country-update` payload will be guaranteed to invoke the stores' * registered callbacks in order: `CountryStore`, `CityStore`, then * `FlightPriceStore`. */ class Dispatcher<TPayload> { _callbacks: {[key: DispatchToken]: (payload: TPayload) => void}; _isDispatching: boolean; _isHandled: {[key: DispatchToken]: boolean}; _isPending: {[key: DispatchToken]: boolean}; _lastID: number; _pendingPayload: TPayload; constructor() { this._callbacks = {}; this._isDispatching = false; this._isHandled = {}; this._isPending = {}; this._lastID = 1; } /** * Registers a callback to be invoked with every dispatched payload. Returns * a token that can be used with `waitFor()`. */ register(callback: (payload: TPayload) => void): DispatchToken { var id = _prefix + this._lastID++; this._callbacks[id] = callback; return id; } /** * Removes a callback based on its token. */ unregister(id: DispatchToken): void { invariant( this._callbacks[id], 'Dispatcher.unregister(...): `%s` does not map to a registered callback.', id ); delete this._callbacks[id]; } /** * Waits for the callbacks specified to be invoked before continuing execution * of the current callback. This method should only be used by a callback in * response to a dispatched payload. */ waitFor(ids: Array<DispatchToken>): void { invariant( this._isDispatching, 'Dispatcher.waitFor(...): Must be invoked while dispatching.' ); for (var ii = 0; ii < ids.length; ii++) { var id = ids[ii]; if (this._isPending[id]) { invariant( this._isHandled[id], 'Dispatcher.waitFor(...): Circular dependency detected while ' + 'waiting for `%s`.', id ); continue; } invariant( this._callbacks[id], 'Dispatcher.waitFor(...): `%s` does not map to a registered callback.', id ); this._invokeCallback(id); } } /** * Dispatches a payload to all registered callbacks. */ dispatch(payload: TPayload): void { invariant( !this._isDispatching, 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.' ); this._startDispatching(payload); try { for (var id in this._callbacks) { if (this._isPending[id]) { continue; } this._invokeCallback(id); } } finally { this._stopDispatching(); } } /** * Is this Dispatcher currently dispatching. */ isDispatching(): boolean { return this._isDispatching; } /** * Call the callback stored with the given id. Also do some internal * bookkeeping. * * @internal */ _invokeCallback(id: DispatchToken): void { this._isPending[id] = true; this._callbacks[id](this._pendingPayload); this._isHandled[id] = true; } /** * Set up bookkeeping needed when dispatching. * * @internal */ _startDispatching(payload: TPayload): void { for (var id in this._callbacks) { this._isPending[id] = false; this._isHandled[id] = false; } this._pendingPayload = payload; this._isDispatching = true; } /** * Clear bookkeeping used for dispatching. * * @internal */ _stopDispatching(): void { delete this._pendingPayload; this._isDispatching = false; } } module.exports = Dispatcher;
可以继承,示例如下:
import { Dispatcher } from 'flux'; //当handleViewAction被某一个action触发时,它会和该Action起始位置的某些数据一起被分发。 //当某一个Store被创建后,她就会被Dispatcher登记注册并开始监听相关的Action。 //当某个Action被分发后,它会按照一定的次序被处理接收,然后发送到相应的Store中 class TimeCountDownDispatcher extends Dispatcher{ handleAction(action){ console.log("dispatching actions:",action); this.dispatch({ source: 'VIEW_ACTION', action }) } }
五、Store
Store主要用来存放应用程序逻辑和State数据的若干对象。当前的State数据可以通过访问Store的属性获取。某个Store需要修改State数据的所有操作指令都是由Action提供的。Store将会按照类别处理Action,并修改相关的数据。一旦数据发生了修改,该Store将会发出一个事件通知任何订阅了该Store的View,它们的数据发生了变化。首先介绍EventEmitter的API如下:
//首先安装events包 npm install events --save
EventEmitter是Facebook开发的一个开源的类event.js,完整代码为:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// Copyright Joyent, Inc. and other Node contributors. // // Permission is hereby granted, free of charge, to any person obtaining a // copy of this software and associated documentation files (the // "Software"), to deal in the Software without restriction, including // without limitation the rights to use, copy, modify, merge, publish, // distribute, sublicense, and/or sell copies of the Software, and to permit // persons to whom the Software is furnished to do so, subject to the // following conditions: // // The above copyright notice and this permission notice shall be included // in all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN // NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, // DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR // OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE // USE OR OTHER DEALINGS IN THE SOFTWARE. 'use strict'; var R = typeof Reflect === 'object' ? Reflect : null var ReflectApply = R && typeof R.apply === 'function' ? R.apply : function ReflectApply(target, receiver, args) { return Function.prototype.apply.call(target, receiver, args); } var ReflectOwnKeys if (R && typeof R.ownKeys === 'function') { ReflectOwnKeys = R.ownKeys } else if (Object.getOwnPropertySymbols) { ReflectOwnKeys = function ReflectOwnKeys(target) { return Object.getOwnPropertyNames(target) .concat(Object.getOwnPropertySymbols(target)); }; } else { ReflectOwnKeys = function ReflectOwnKeys(target) { return Object.getOwnPropertyNames(target); }; } function ProcessEmitWarning(warning) { if (console && console.warn) console.warn(warning); } var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) { return value !== value; } function EventEmitter() { EventEmitter.init.call(this); } module.exports = EventEmitter; // Backwards-compat with node 0.10.x EventEmitter.EventEmitter = EventEmitter; EventEmitter.prototype._events = undefined; EventEmitter.prototype._eventsCount = 0; EventEmitter.prototype._maxListeners = undefined; // By default EventEmitters will print a warning if more than 10 listeners are // added to it. This is a useful default which helps finding memory leaks. var defaultMaxListeners = 10; Object.defineProperty(EventEmitter, 'defaultMaxListeners', { enumerable: true, get: function() { return defaultMaxListeners; }, set: function(arg) { if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) { throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.'); } defaultMaxListeners = arg; } }); EventEmitter.init = function() { if (this._events === undefined || this._events === Object.getPrototypeOf(this)._events) { this._events = Object.create(null); this._eventsCount = 0; } this._maxListeners = this._maxListeners || undefined; }; // Obviously not all Emitters should be limited to 10. This function allows // that to be increased. Set to zero for unlimited. EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) { if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) { throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.'); } this._maxListeners = n; return this; }; function $getMaxListeners(that) { if (that._maxListeners === undefined) return EventEmitter.defaultMaxListeners; return that._maxListeners; } EventEmitter.prototype.getMaxListeners = function getMaxListeners() { return $getMaxListeners(this); }; EventEmitter.prototype.emit = function emit(type) { var args = []; for (var i = 1; i < arguments.length; i++) args.push(arguments[i]); var doError = (type === 'error'); var events = this._events; if (events !== undefined) doError = (doError && events.error === undefined); else if (!doError) return false; // If there is no 'error' event listener then throw. if (doError) { var er; if (args.length > 0) er = args[0]; if (er instanceof Error) { // Note: The comments on the `throw` lines are intentional, they show // up in Node's output if this results in an unhandled exception. throw er; // Unhandled 'error' event } // At least give some kind of context to the user var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : '')); err.context = er; throw err; // Unhandled 'error' event } var handler = events[type]; if (handler === undefined) return false; if (typeof handler === 'function') { ReflectApply(handler, this, args); } else { var len = handler.length; var listeners = arrayClone(handler, len); for (var i = 0; i < len; ++i) ReflectApply(listeners[i], this, args); } return true; }; function _addListener(target, type, listener, prepend) { var m; var events; var existing; if (typeof listener !== 'function') { throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener); } events = target._events; if (events === undefined) { events = target._events = Object.create(null); target._eventsCount = 0; } else { // To avoid recursion in the case that type === "newListener"! Before // adding it to the listeners, first emit "newListener". if (events.newListener !== undefined) { target.emit('newListener', type, listener.listener ? listener.listener : listener); // Re-assign `events` because a newListener handler could have caused the // this._events to be assigned to a new object events = target._events; } existing = events[type]; } if (existing === undefined) { // Optimize the case of one listener. Don't need the extra array object. existing = events[type] = listener; ++target._eventsCount; } else { if (typeof existing === 'function') { // Adding the second element, need to change to array. existing = events[type] = prepend ? [listener, existing] : [existing, listener]; // If we've already got an array, just append. } else if (prepend) { existing.unshift(listener); } else { existing.push(listener); } // Check for listener leak m = $getMaxListeners(target); if (m > 0 && existing.length > m && !existing.warned) { existing.warned = true; // No error code for this since it is a Warning // eslint-disable-next-line no-restricted-syntax var w = new Error('Possible EventEmitter memory leak detected. ' + existing.length + ' ' + String(type) + ' listeners ' + 'added. Use emitter.setMaxListeners() to ' + 'increase limit'); w.name = 'MaxListenersExceededWarning'; w.emitter = target; w.type = type; w.count = existing.length; ProcessEmitWarning(w); } } return target; } EventEmitter.prototype.addListener = function addListener(type, listener) { return _addListener(this, type, listener, false); }; EventEmitter.prototype.on = EventEmitter.prototype.addListener; EventEmitter.prototype.prependListener = function prependListener(type, listener) { return _addListener(this, type, listener, true); }; function onceWrapper() { var args = []; for (var i = 0; i < arguments.length; i++) args.push(arguments[i]); if (!this.fired) { this.target.removeListener(this.type, this.wrapFn); this.fired = true; ReflectApply(this.listener, this.target, args); } } function _onceWrap(target, type, listener) { var state = { fired: false, wrapFn: undefined, target: target, type: type, listener: listener }; var wrapped = onceWrapper.bind(state); wrapped.listener = listener; state.wrapFn = wrapped; return wrapped; } EventEmitter.prototype.once = function once(type, listener) { if (typeof listener !== 'function') { throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener); } this.on(type, _onceWrap(this, type, listener)); return this; }; EventEmitter.prototype.prependOnceListener = function prependOnceListener(type, listener) { if (typeof listener !== 'function') { throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener); } this.prependListener(type, _onceWrap(this, type, listener)); return this; }; // Emits a 'removeListener' event if and only if the listener was removed. EventEmitter.prototype.removeListener = function removeListener(type, listener) { var list, events, position, i, originalListener; if (typeof listener !== 'function') { throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener); } events = this._events; if (events === undefined) return this; list = events[type]; if (list === undefined) return this; if (list === listener || list.listener === listener) { if (--this._eventsCount === 0) this._events = Object.create(null); else { delete events[type]; if (events.removeListener) this.emit('removeListener', type, list.listener || listener); } } else if (typeof list !== 'function') { position = -1; for (i = list.length - 1; i >= 0; i--) { if (list[i] === listener || list[i].listener === listener) { originalListener = list[i].listener; position = i; break; } } if (position < 0) return this; if (position === 0) list.shift(); else { spliceOne(list, position); } if (list.length === 1) events[type] = list[0]; if (events.removeListener !== undefined) this.emit('removeListener', type, originalListener || listener); } return this; }; EventEmitter.prototype.off = EventEmitter.prototype.removeListener; EventEmitter.prototype.removeAllListeners = function removeAllListeners(type) { var listeners, events, i; events = this._events; if (events === undefined) return this; // not listening for removeListener, no need to emit if (events.removeListener === undefined) { if (arguments.length === 0) { this._events = Object.create(null); this._eventsCount = 0; } else if (events[type] !== undefined) { if (--this._eventsCount === 0) this._events = Object.create(null); else delete events[type]; } return this; } // emit removeListener for all listeners on all events if (arguments.length === 0) { var keys = Object.keys(events); var key; for (i = 0; i < keys.length; ++i) { key = keys[i]; if (key === 'removeListener') continue; this.removeAllListeners(key); } this.removeAllListeners('removeListener'); this._events = Object.create(null); this._eventsCount = 0; return this; } listeners = events[type]; if (typeof listeners === 'function') { this.removeListener(type, listeners); } else if (listeners !== undefined) { // LIFO order for (i = listeners.length - 1; i >= 0; i--) { this.removeListener(type, listeners[i]); } } return this; }; function _listeners(target, type, unwrap) { var events = target._events; if (events === undefined) return []; var evlistener = events[type]; if (evlistener === undefined) return []; if (typeof evlistener === 'function') return unwrap ? [evlistener.listener || evlistener] : [evlistener]; return unwrap ? unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length); } EventEmitter.prototype.listeners = function listeners(type) { return _listeners(this, type, true); }; EventEmitter.prototype.rawListeners = function rawListeners(type) { return _listeners(this, type, false); }; EventEmitter.listenerCount = function(emitter, type) { if (typeof emitter.listenerCount === 'function') { return emitter.listenerCount(type); } else { return listenerCount.call(emitter, type); } }; EventEmitter.prototype.listenerCount = listenerCount; function listenerCount(type) { var events = this._events; if (events !== undefined) { var evlistener = events[type]; if (typeof evlistener === 'function') { return 1; } else if (evlistener !== undefined) { return evlistener.length; } } return 0; } EventEmitter.prototype.eventNames = function eventNames() { return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : []; }; function arrayClone(arr, n) { var copy = new Array(n); for (var i = 0; i < n; ++i) copy[i] = arr[i]; return copy; } function spliceOne(list, index) { for (; index + 1 < list.length; index++) list[index] = list[index + 1]; list.pop(); } function unwrapListeners(arr) { var ret = new Array(arr.length); for (var i = 0; i < ret.length; ++i) { ret[i] = arr[i].listener || arr[i]; } return ret; }
//列举几个基本API如下: //1、添加事件监听,一直监听 //type:事件名称 //listener:回调函数 EventEmitter.prototype.addListener = function addListener(type, listener) {}; EventEmitter.prototype.on = EventEmitter.prototype.addListener; //等同上面代码 //2、添加事件监听,只监听一次 EventEmitter.prototype.once = function once(type, listener){} //3、移除事件监听 EventEmitter.prototype.removeListener = function removeListener(type, listener){} EventEmitter.prototype.off = EventEmitter.prototype.removeListener;//等同上面代码 //4、移除所有监听 EventEmitter.prototype.removeAllListeners = function removeAllListeners(type){} //5、触发监听 EventEmitter.prototype.emit = function emit(type){}
可以继承,示例如下:
import { EventEmitter } from 'events';
//Store会保存倒计时应用程序的State,也即计数值。计数值可以通过一个只读属性访问。当Action被分发后,Store会使用它们来修改计数值。 //一个TICK Action会减少计数值。一个RESET Action会重置整个计数值,以及该Action引用的所有数据。 //一旦State发生改变,Store就会发起一个事件到任何正在监听的View export class TimeCountDownStore extends EventEmitter{ constructor(count=5, dispatcher){ super(); this._count = count; dispatcher.register( this.dispatch.bind(this) ) } get count(){ return this._count; } dispatch(payload){ const {type,count} = payload.action; switch (type) { case 'TICK': this._count = this._count - 1; this.emit("TICK"); //触发TICK事件 return true; case 'RESET': this._count = count; this.emit("RESET"); //触发RESET事件 return true; default: return true; } } }
六、整合
首先,创建了appDispatcher,然后使用appDispatcher生成Action生成器。最后,appDispatcher被注册到了Store中,并且Store将初始化的计数值设置为10。render函数用于渲染包含计数值的View,该计数值是通过参数进行传递的。同时还有Action生成器也作为属性被传递给了该View。最后,某些监听器被添加到了Store中,从而完成整个循环流程。当Store发起了一个TICK或者RESET,它会产生一个新的计数,因此需要马上在View中渲染。然后,初始View会根据Store中的计数值进行渲染。每次View发起一个TICK或者RESET时,该Action将会沿着循环节点发送,最终作为准备重现渲染的数据返回该View。
//将这些部分综合连接起来 const appDispatcher = new TimeCountDownDispatcher(); const actions = timeCountDownActions(appDispatcher); const store = new TimeCountDownStore(10, appDispatcher); const render = count => ReactDOM.render( <TimeCountDown count={count} {...actions} />, document.getElementById('root') ); store.on('TICK', ()=>render(store.count)); //监听TICK事件 store.on('RESET', ()=>render(store.count)); //监听RESET事件 render(store.count);
七、演示
myTest.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import React from 'react'; import {Dispatcher} from 'flux'; import {EventEmitter} from 'events'; //使用函数式组件创建一个倒计时组件 //倒计时应用的View会将计数作为属性获取。它还会接收一对函数:tick和reset。 //当View渲染它之后会显示倒计时,除非值为0,否则会显示点击文案。如果计数值不是0,那么超时函数一秒后执行tick函数。 //当计数值为0时,View不会被任何Action生成器触发,除非用户点击了调起重置reset函数,再次进入倒计时。 export const TimeCountDown = ({count, tick, reset}) => { if (count){ setTimeout(() => tick(), 1000); } const divStyle = { width: 200, textAlign: "center", backgroundColor: "red", padding: 50, fontFamily: "sans-serif", }; const textStyle = { color: "white", fontSize: 30, fontFamily: "sans-serif", }; return ( (count) ? <div style={divStyle}><h1 style={textStyle}>{count}</h1></div> : <div style={divStyle} onClick={() => reset(10)}> <h1 style={textStyle}>Click Restart</h1> </div> ) }; //当倒计时Action生成器被载入时,dispatcher会作为一个参数传递给它。每次某个TICK或者RESET函数被调用时, //dispatcher的handleViewAction方法也会被调用,以便"调度"Action对象。 export const timeCountDownActions = dispatcher => ({ tick() { dispatcher.handleAction({type: 'TICK'}) }, reset(count){ dispatcher.handleAction({ type: 'RESET', count }) } }); //当handleViewAction被某一个action触发时,它会和该Action起始位置的某些数据一起被分发。 //当某一个Store被创建后,她就会被Dispatcher登记注册并开始监听相关的Action。 //当某个Action被分发后,它会按照一定的次序被处理接收,然后发送到相应的Store中 export class TimeCountDownDispatcher extends Dispatcher{ handleAction(action) { console.log("dispatching actions:", action); this.dispatch({ source: 'VIEW_ACTION', action }) } } //export default class App extends Component //Store会保存倒计时应用程序的State,也即计数值。计数值可以通过一个只读属性访问。当Action被分发后,Store会使用它们来修改计数值。 //一个TICK Action会减少计数值。一个RESET Action会重置整个计数值,以及该Action引用的所有数据。 //一旦State发生改变,Store就会发起一个事件到任何正在监听的View export class TimeCountDownStore extends EventEmitter{ constructor(count=5, dispatcher){ super(); this._count = count; dispatcher.register( this.dispatch.bind(this) ) } get count(){ return this._count; } dispatch(payload){ const {type,count} = payload.action; switch (type) { case 'TICK': this._count = this._count - 1; this.emit("TICK"); //触发TICK事件 return true; case 'RESET': this._count = count; this.emit("RESET"); //触发RESET事件 return true; default: return true; } } }
index.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import {TimeCountDown, timeCountDownActions, TimeCountDownDispatcher, TimeCountDownStore} from './myTest' //将这些部分综合连接起来 const appDispatcher = new TimeCountDownDispatcher(); const actions = timeCountDownActions(appDispatcher); const store = new TimeCountDownStore(10, appDispatcher); const render = count => ReactDOM.render( <TimeCountDown count={count} {...actions} />, document.getElementById('root') ); store.on("TICK", ()=>render(store.count)); //监听TICK事件 store.on("RESET", ()=>render(store.count)); //监听RESET事件 render(store.count);
结果如下:可以看到每一个action被分派执行
八、引用
实现Flux模式的方法有很多种。一些库基于这种设计模式的特定实现已经开源了。如下所示:
Flux(https://facebook.github.io/flux/)。该库包含一个Dispatcher的实现。
Reflux(https://github.com/reflux/reflux.js)。单向数据流的简化版实现,主要聚焦于Action、Store和View。
Flummox(http://acdlite.github.io/flummox)。一个Flux模式的具体实现,允许用户通过扩展JavaScript类来构建Flux模块。
Fluxible(http://fluxble.io)。一个由Yahoo创建的Flux框架,用于同构Flux应用。
Redux(http://redux.js.org)。一个类Flux库,用于函数取代对象来实现模块化。目前最受欢迎的Flux框架之一。
MobX(https://mobx.js.org/getting-started.html)。一个State管理库,使用观察检测来响应State中的变化。