Reflux 101

一点背景 React在设计之初就只关注在View本身上,其余部分如数据的获取,事件处理等,全然不在考虑之内。不过构建大型的Web前端应用,这些点又实在不可避免。所以Facebook的工程师提出了前端的Flux架构,这个架构的最大特点是单向数据流(后面详述)。但是Flux本身的实现有很多不合理的地方,比如单例的Dispatcher会在系统中有多种事件时导致臃肿的switch-cases等。 这里是Facebook官方提供的提供Flux的结构图。 其实整个Flux背后的思想也不是什么新东西。在很久之前,Win32的消息机制(以及很多的GUI系统)就在使用这个模型,而且这也是一种被证实可以用来构建大型软件的模型。 鉴于Flux本身只是一个架构,而且Facebook提供的参考实现又有一些问题,所以社区有了很多版本的Flux实现。比如我们这里会用到的Reflux。 Reflux简介 简而言之,Reflux里有两个组件:Store和Action。Store负责和数据相关的内容:从服务器上获取数据,并更新与其绑定的React组件(view controller);Action是一个事件的集合。Action和Store通过convention来连接起来。 具体来说,一个典型的过程是: 用户的动作(或者定时器)在组件上触发一个Action Reflux会调用对应的Store上的callback(自动触发) 这个callback在执行结束之后,会显式的触发(trigger)一个数据 对应的组件(可能是多个)的state会被更新 React组件检测到state的变化后,会自动重绘自身 一个例子 我们这里将使用React/Reflux开发一个实际的例子,从最简单的功能开始,逐步将其构建为一个较为复杂的应用。 这个应用是一个书签展示应用(数据来源于我的Google Bookmarks)。第一个版本的界面是这样的: 要构建这样一个列表应用,我们需要这样几个部分: 一个用来fetch数据,存储数据的store (BookmarkStore) 一个用来表达事件的Action(BookmarkActions) 一个列表组件(BookmarkList) 一个组件条目组件(Bookmark) 定义Actions var Reflux = require('reflux'); var BookmarkActions = Reflux.createActions([ 'fetch' ]); module.exports = BookmarkActions; 第一个版本,我们只需要定义一个fetch事件即可。然后在Store中编写这个Action的回调: 定义Store var $ = require('jquery'); var Reflux = require('reflux'); var BookmarkActions = require('../actions/bookmark-actions'); var Utils = require('../utils/fetch-client'); var BookmarkStore = Reflux.createStore({ listenables: [BookmarkActions], init: function() { this.onFetch(); }, onFetch: function() { var self = this; Utils....

November 9, 2015 · 3 min · 邱俊涛 | Juntao Qiu