Flux demo

Introduction

flux应用架构如下图所示，本文并不是讲述怎么立即做一个酷炫的应用，而是讲述如何依照这种框架，来进行代码的组织。

我们先把这个流程转述为文字：抛开与webAPI的交互不谈，以后的文章再介绍。
flux应用的数据流是单向的，从我们之前最熟悉的React组件看起，它们构成了上图中的React Views。用户交互可以使得Action Creators创建Action，交由Dispatcher分发。根据已注册的Store信息，Dispathcer管理依赖，完成分发，而Store会触发数据改变的事件，侦听该事件的React Views即会进行Store Queries，拿到数据。
本文以完成下图的功能为例，一个可以添加item的表单。如果不套flux用的代码少的多，但是，这样的例子适合用于讲解flux而非专注于其它细节(复杂应用将更偏重于React 组件的设计，于本文中心偏离)。

源码已经上传:https://github.com/EcutDavid/fluxDemo

搭建目录，文件结构

 mkdir script && cd script

 mkdir actions components dispatcher stores constants

 cd ..

 touch entry.js index.html webpack.config.js

关于webpack，博主的webpack系列文章已经介绍，再此，不再赘述。
安装moudles(关于moudles的选型，仁者见仁，智者见智，无需拘束于以下的例子)。

npm init

npm install babel-loader css-loader style-loader flux react keymirror events obejct-assign --save

Dispatcher

flux中， Dispatcher是单例的，所以，直接向下面代码一样返回一个实例。之后，Action与Store都会用到它们。

script/dispatcher/dispatcher.js

var Dispatcher = require('flux').Dispatcher;

module.exports = new Dispatcher();

Action

实现一个枚举，用于定义所有的Action类型，借助于keymirror实现

script/constants/appConstants.js

var keyMirror = require('keymirror');

module.exports = new keyMirror({

  CREATE: null

});

ActionCreator要借助dispatcher来分发action。

script/actions/appActionCreator.js

"use strict"

var dispatcher = require('../dispatcher/dispatcher');

var appConstants = require('../constants/appConstants');

var appActionCreator = {

  create: function(text) {

    dispatcher.dispatch({

      actionType: appConstants.CREATE,

      text: text

    });

  }

};

module.exports = appActionCreator;

Store

Store中，我们需要向dispatcher注册并处理dispatcher分发过来的action，提供接口使得view可以侦听数据变化，查询数据。

script/stores/appStore.js

"use strict"

var dispatcher = require('../dispatcher/dispatcher');

var EventEmitter = require('events').EventEmitter;

var appConstants = require('../constants/appConstants');

var assign = require('object-assign');

var CHANGE_EVENT = 'change';

var textList = [];

var appStore = assign({}, EventEmitter.prototype, {

  create: function(text){

    textList.push(text);

  },

  getAll: function() {

    return textList;

  },

  emitChange: function() {

    this.emit(CHANGE_EVENT);

  },

  addChangeListener: function(callback) {

    this.on(CHANGE_EVENT, callback);

  },

  removeChangeListener: function(callback) {

    this.removeListener(CHANGE_EVENT, callback);

  }

});

dispatcher.register(function(action) {

  switch(action.actionType) {

    case appConstants.CREATE:

      appStore.create(action.text);

      appStore.emitChange();

      break;

    default:

  }

});

Views

在view中，我们侦听store的数据变化，在用户交互时，发出action。

"use strict"

var React = require('react');

require('../../style/main.css');

var appActionCreator = require('../actions/appActionCreator');

var appStore = require('../stores/appStore');

var App = React.createClass({

  componentDidMount: function(){

    appStore.addChangeListener(this._onChange);

  },

  componentWillUnmount: function(){

    appStore.removeChangeListener(this._onChange);

  },

  _onChange: function(){

    var arr = appStore.getAll();

    this.setState({'infoList': arr});

  },

  getInitialState:function(){

    var arr = appStore.getAll();

    return({'infoList': arr});

  },

  add: function(){

    appActionCreator.create(React.findDOMNode(this.refs.textArea).value);

  },

  render: function(){

    var textList = this.state.infoList.map(function(item){

      return <p>{item}</p>;

    });

    return(

      <div className="container">

        <input ref="textArea" type="text"></input>

        <button className="button" onClick={this.add}>add</button>

        {textList}

      </div>

    );

  }

});

module.exports = App;

entry.js

var React = require('react');

var App = require('./script/components/app');

React.render(<App />, document.body);

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    <script src="bundle.js"></script>

  </body>

</html>

效果：

dispatcher还可以管理sotre之间的依赖， 借助react，我们还可以开发很多易维护的前端组件。
本文是一个完整的flux应用的例子，侧重的是代码，flux的理念请看博主的其它文章 :)

 
 

Flux demo的更多相关文章

  1. Flux Demo解析

    最近学习了阮一峰老师的博文 "Flux入门教程",博文中详细介绍了Flux框架和Controller view模式,并提供了Demo,受益匪浅. 现特参考阮老师的Demo,绘制了一 ...

  2. React 实践记录 04 Flux demo

    Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织. 我们先把这个流程转述为文字:抛开与webAPI的交互不谈,以 ...

  3. Windows 下 Git 安装与初始配置

    官方下载地址:https://git-scm.com/download/win,我下载的最新版是 Git-2.15.1.2-64-bit.exe . Windows 下安装步骤 1.相关信息,直接“ ...

  4. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  5. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  6. 【原】flux学习笔记

    最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,入职新公司,现在的团队也开始在React领域有所尝试. 2016年应该是React 逐渐走向成熟的一年.之前在原来公司搞不懂的问 ...

  7. BZOJ1695 : [Usaco2007 Demo]Walk the Talk

    观察单词表可以发现: 对于长度为3的单词,前两个字母相同的单词不超过7个 对于长度为4的单词,前两个字母相同的单词不超过35个 于是首先$O(26*26*nm)$预处理出 s1[x][i][j]表示( ...

  8. Flux --> Redux --> Redux React 入门

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  9. 探索从 MVC 到 MVVM + Flux 架构模式的转变

    本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...

随机推荐

  1. 从零開始学android&lt;数据存储（1）SharedPreferences属性文件.三十五.&gt;

    在android中有五种保存数据的方法.各自是: Shared Preferences Store private primitive data in key-value pairs. 相应属性的键值 ...

  2. 编程算法 - 不用加减乘除做加法 代码(C)

    不用加减乘除做加法 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 写一个函数, 求两个整数之和, 要求在函数体内不得使用+, -, *, /四 ...

  3. cocos2d-x笔记（十一）Lua发展飞机战争-5- 让飞机动

    然后在飞机上已被添加到游戏,下一步是让它动起来.主要是为了应对触摸事件. 在C++通过重写ccTouchBegan().ccTouchMoved().ccTouchEnded()三个函数来响应触摸事件 ...

  4. android 如何分析java.lang.IllegalArgumentException: Cannot draw recycled bitmaps异常

    这类问题的分析,通常你需要找到bitmap对象已经在那个位置recyle,然后检查代码. 如何定位的位置,其中代码具有对bitmap 目的recyle.能够 Bitmap.java的recycle方法 ...

  5. FS SIP呼叫的消息线程和状态机线程

    THREAD 当收到一次呼叫的时候,FS会在TU层创建两个线程,一个线程为状态机线程,另外一个为消息线程.状态机线程通过switch_core_session_thread_launch创建,顾名思义 ...

  6. Hbase0.96源码之HMaster(二)Hmaster主要循环becomeActiveMaster

    1,Hmaster主循环主要这里主要有: 1,1 becomeActiveMaster(startupStatus); 1.2 finishInitialization 1.3 loop() beco ...

  7. python基础课程_学习笔记15：标准库：有些收藏夹——fileinput

    标准库:有些收藏夹 fileinput 重要功能 性能 叙述性说明 input([files[,inplace[,backup]]) 便于遍历多个输入流中的行 filename() 返回当前文件的名称 ...

  8. Android从无知到有知——NO.7

    的ip拨号器在监听外拨电话时用的是系统提供的广播事件.而有些时候我们须要自己设定广播事件来满足特定的须要. Ok,今天整一下自己定义广播事件,我们用一个状态监測模块向一个3G模块发送报警信息来实现这一 ...

  9. Java获得正则表达式

    t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,wid ...

  10. 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

    为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...