Reflux中文教程——概览

翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs

〇、安装及引入

安装:

npm install reflux

引入:

var Reflux = require("reflux");//CommonJS风格

import Reflux from "reflux";//ES6风格

一、Overview概览

The main function of Reflux is to introduce a more functional programming style architecture by eschewing MVC like pattern and adopting a single data flow pattern.

Reflux的主要功能是引入一个函数式编程风格架构,采用单向数据流模式,而非MVC类似的模式。

这个模式由actions和data stores组成。当actions引入新数据时,要经过data stores之后再由view 组件展示。如果组件有事件要更改data stores,也需要经过相应的actions再传递到stores。

二、用法

要用reflux,我们需要创建可以被React Component唤起的actions;负责存储、更新数据的stores,stores会监听actions;同样的,stores会与React Component挂钩,当store里state更新时,也更新React Component中的state。因此,有3个概念如下:

1、创建actions

2、创建stores

3、创建 stores与React Component的联系(钩子)

三、创建actions

var statusAction = Reflux.createAction();//可选的参数对象

一个action是函数,可以像任何其他函数一样被调用,如:statusUpdate(data)

也有一个创建多个action的函数

var Actions = Reflux.createActions([    "statusUpdate",    "statusEdited",    "statusAdded"]);

Actions对象现在包含多个actions,它们被调用的方式与上面一样

Actions.statusUpdate();

关于Actions更多的内容:

  • 用子actions异步加载文件
  • 做preEmit和shouldEmit检查
  • 快捷方法

四、创建Stores

创建data store很像ReactJS的React.Component,就是创建一个继承自Reflux.Store的类。

像component一样,store也有一个state属性,并且setState用法也一样。你可以在constructor中创建所有的action listeners,并且用store自己的listenTo函数注册他们

class StatusStore extends Reflux.Store{    constructor(){        super();        this.state = {//设置store的默认值和在react里面一样            flag: ‘OFFLINE‘        };        this.listenTo(statusUpdate, this.onStatusUpdate)//监听statusUpdate action    }    onStatusUpdate(status){        var newFlag = status ? ‘ONLINE‘: ‘OFFLINE‘;        this.setState({flag: newFlag});    }

}

在上面的例子中,无论何时statusUpdate被调用,store里面的onStatusUpdate回调函数就会被调用,参数就是传入action的参数。比如,action如果这样调用的:statusUpdate(true),那么onStatusUpdatestatus被调用时的参数就是true。

store也可以方便的注册actions集,比如this.listenables。 如果一个 action 对象(或者包含多个actions对象的数组)这样用的话,会自动的以名字注册回调函数。如on+驼峰,onActionName

var Actions = Reflux.createActions([‘firstAction‘, ‘secondAction‘]);

class StatusStore extends Reflux.Store{    constructor(){        super();        this.listenables = Actions;    }    onFirstAction(){        //    }    onSecondAction(){        //    }}

Reflux Stores非常强大,甚至可以做到创建可以被局部读取和设置的全局的state,或者 full-state time-travel, debugging, etc.(什么意思。。。。)

五、Hooking Stores to Components

创建了actions和stores之后,现在最后一步就是Hooking Stores to Components。

非常简单,extends React.Component 换成extends Reflux.Component,再设置上stores,就可以了。

Reflux.Component是继承自React.Component的,所以你可以放心使用。

两者唯一不同就是Reflux.Component允许你设置store,以便从store中获取state

class MyComponent extends Reflux.Component{    constructor(props){        super(props);        this.state = {};//store会将它的state加到组件的state里面去        this.store = StatusStore;//assign这个store 类就可以了    }    render(){        var flag = this.state.flag;        return <div>User is {flag}</div>    }}

当组件mount的时候,要么会创建StatusStore的一个单例实例(如果还未存在),要么会用一个已经存在的单例实例(如果已经被别的使用这个store的组件创建了)

注意,你可以:

1、可以将this.stores 赋值为包含一系列store类的数组

2、设置this.storeKeys(数组)来限制只有store的一部分state被混入到组件里

还有一个mapStoreToState方法用于完全控制store里的state到component 的对应关系

class MyComponent extends Reflux.Component{    constructor(props){        super(props);        this.state = {type: ‘admin‘};        this.stores = [StatusStore, AnotherStore];        this.storeKeys = [‘flag‘, ‘info‘];    }    render(){        var flag = this.state.flag;        var info = this.state.info;        var type = this.state.type;        return (            <div>User is {flag}, info: {info}, type: {type}</div>        )    }}

上面组件会将StatusStore 和 AnotherStore的state都加进去,但是,由于this.storeKeys的限制,它只会把flag和info这两个state加进去state,其他的不会。即使一个store中含有一个type 的state,也不会加进来。我们组件state里的type是安全的。

更多:

Reflux这种直接的将store集成到组件里的方式又简单,又强大。你可以将stores集合起来,筛选那些state需要哪些不需要,甚至可以详细的规定store里的state如何对应到某个组件里的state

六、文档

以上只是对Reflux的大体的介绍,九牛一毛,如果你想深入了解,请看官方文档。

我尽量的多翻译点(*^__^*)

Reflux中文教程——概览

时间: 2024-10-08 11:13:42

Reflux中文教程——概览的相关文章

Reflux中文教程——action

翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs/tree/master/docs/actions 一.概览 在Reflux中,actions是store可以监听的函数.action发送一个事件,监听它的store的单例实例就会收到,但调用形式跟函数一样. 二.创建actions 在Reflux中,创建action有多种方式.两种主要方式是Reflux.createAction(创建一个) 和Reflux.createAction

Sublime Text最好的中文教程

原文链接:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Sublime Text中文教程. 更新记录 2014/09/27:完成初稿 2014/09/28: 更正打开控制台的快捷键为Ctrl + ` 更正全局替换的快捷键为Ctrl + Alt + Enter 前言(Prologue) Sublime Text是一款跨平台代码编辑器(Code Editor

iOS App上架发布到app store市场最新中文教程

iOS -App发布Appstore最新中文教程 这个教程教你怎么把开发好的ios应用上架到appstore市场,一步一步带截图,包括最新的appstore后台系统itunesconnect使用,证书创建和管理,应用id创建和管理,上传ipa等都将一步一步详细介绍. 下面从七个步骤进行详细介绍! 1.创建唯一标示符App IDs 2.申请发布证书 3.申请发布描述文件 4.到iTunes Connect创建App并填写信息 5.Windows下选择证书编译打包 6.Windows下上传IPA到A

struts2官方 中文教程 系列十一:使用XML进行表单验证

在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让您可以内置到Struts 2框架的验证器. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列十一:使用XML进行表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6938720.html 下载本章节代码 为了使用户能够编辑存储在Person对

struts2官方 中文教程 系列九:Debugging Struts

介绍 在Struts 2 web应用程序的开发过程中,您可能希望查看由Struts 2框架管理的信息.本教程将介绍两种工具,您可以使用它们来查看.一个工具是Struts 2的配置插件,另一个是调试拦截器.本文还讨论了如何设置日志级别以查看更多或更少的日志消息. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列九:Debugging Struts 即 http://www.cnblogs.com/linghaoxinpian/p/6916619.html 下载本章节代码 Configu

struts2官方 中文教程 系列七:消息资源文件

介绍 在本教程中,我们将探索使用Struts 2消息资源功能(也称为 resource bundles 资源绑定).消息资源提供了一种简单的方法,可以将文本放在一个视图页面中,通过应用程序,创建表单字段标签,并根据用户的语言环境将文本更改为特定的语言. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列七:消息资源文件  即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 信息资源属性文件 在Struts2 we

DotCMS中文教程

CMS全称Content Management System,内容管理系统,内容可以包含咨询.博客.介绍等,主要用于网络建站,可以作为企业门户网站.新闻网站.博客站点等,甚至可以集成电子商务功能,随着这两年移动互联网的发展,也出现了越来越多的微网站,那么CMS不仅仅要求能在PC网站上使用,同时也要求在移动互联网上使用. CMS系统好处不在多说,那么怎么拥有这么一套通用的系统呢,答案1:你可以自己开发出来一套,当然前提是你有时间和成本,答案2:你可以买一套系统,当前国内CMS系统价格在2000以上

Swift中文教程(五)--对象和类

原文:Swift中文教程(五)--对象和类 Class 类 在Swift中可以用class关键字后跟类名创建一个类.在类里,一个属性的声明写法同一个常量或变量的声明写法一样,除非这个属性是在类的上下文里面,否则,方法和函数的写法也是这样: 1 class Shape { 2 var numberOfSides = 0 3 func simpleDescription() -> String { 4 return "A shape with \(numberOfSides) sides.&q

Apple Swift编程语言入门中文教程

Apple Swift编程语言入门教程 目录 1   简介 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与类 7   枚举与结构 1   简介 今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS&OSX开发有所帮助. Swift是供iOS和OS X应用编程的新编程语言,基于C和Objective-C,而却没有C的一些兼容约束.S