201030740221 / lite-flux

lite-flux

lite-flux

** A small and simple flux library for react app **

===

如何安装

npm install lite-flux --save

创建 store 与 action

与所有的 flux 框架一样，可以创建 store,action，通过事件进行数据的单向流动。liteFlux 实现更便捷的开发体验，简化了 flux 的流程与 api

var liteFlux = require('lite-flux');

// 创建名为store1的store,顺便创建相应操作store的action
var store1 = liteFlux.store("store1",{
	data: {
		name: "tom"
	},
	actions: {
		getName: function(){
			// 获取 store
			console.log(this.getStore());
		},
		setName: function(){
			// 修改 store
			var data = this.getStore();
			data.name = "mary";
			this.setStore(data);
		}
	}
});

// 新增一个action
store1.addAction('changeNameAgain', function(){
	...
});

// 获取store
liteFlux.store("store1").getStore();

// 修改store
liteFlux.store("store1").setStore({
	name: "haha"
});

// 重置 store
liteFlux.store("store1").reset();

// 注销store
liteFlux.store("store1").destroy();

// 触发action
store1.getAction().getName();
liteFlux.action("store1").getName();
liteFlux.event.emit("store1.getName");

// 你也可以这样创建action
liteFlux.action("store1",{
	getName: function(){
		// 获取 store
		console.log(this.getStore());
	},
	setName: function(){
		// 修改 store
		var data = this.getStore();
		data.name = "mary";
		this.setStore(data);
	}
})

把组件的 state 与 store 绑定

通过 store 管理组件间的状态，通过监听 store 实现修改 store的同时，state 也会作相应的改变

var liteFlux = require('lite-flux');
var React = require('react');

var Event = liteFlux.event;

var store8 = liteFlux.store("store8",{
	data: state1,
	actions: {
		realChangeName: function(name){
			var store = this.getStore();
			store.name = name;
			this.setStore(store);
		}
	}
});

var App = React.createClass({
	mixins:[liteFlux.mixins.storeMixin('store8')],
	changeName: function(name){
		Event.emit("store8.realChangeName", "mary");
	},
	render: function() {
		return (
			<div>dddddddd</div>
		);
	}
});

使用 linkedStoreMixin 实现双向绑定

在React里面，数据流是一个方向的。但是，有很多应用需要你读取一些数据，然后传回给你的程序，比如表单，我们常规的方法是绑定一个 onChange 方法监听再修改 state，表单一多，这样的写法就不好看了。这时，使用 linkedStoreMixin 就可以实现 store 与 表单之间的双向绑定。（如果想实现 state 与表单之间的双向绑定参考官方的React.addons.LinkedStateMixin）

//假设对应 store 可能是这样的,store 名字为 hello
{
    tom: {
        message: "xxx"    
    }
}
// 如此绑定
var WithLink = React.createClass({
  mixins: [liteFlux.mixins.linkedStoreMixin],
  render: function() {
  // 是的，通过.绑定深层的对象
    return <input type="text" valueLink={this.linkStore('hello','tom.message')} />;
  }
});

使用 liteFlux.validator 实现不与 UI 绑定的数据校验

在数据层进行数据校验，更多直观高效。内置了一些常见的验证类型，可自定义验证类型。

// 内置可验证类型如下：
// name() 用户名
// username() 用户名
// password() 密码
// phone() 手机
// tel() 电话
// date() 日期
// email() 电子邮件
// url() 网址
// number() 可带小数点的数字
// digits() 不带小数点的数字
// minLength(length) 最小长度
// maxLength(length) 最大长度
// equal(val) 相等
// required() 必须
// regex(reg) 添加正则

var Validator = liteFlux.validator;

var store2 = liteFlux.store("store2",{
	data: {
		form: {
			username: '111111',
			password: '',
			email: ''
		},
		fieldError: {
			form: {
				  username: ['', ''] //最终的错误信息会保存成数组放置在这里
			}
		}
	}
});

var validatorTest = Validator(store2,{
	'form.username':{
		required: true,
		lessThen3: true,
		message: {
			required: "不能为空",
			lessThen3: "不能少于三位" // 对应出错信息提示
		}
	},
	'form.password':{
		required: true,
		message: {
			required: "不能为空"
		}
	}
	},{
		//oneError: true //是否只要错了一次就中断
});

//自定义校验规则，在valid调用之前定义
validatorTest.rule('lessThen3', function(val) {
	return val < 3;
});

// 全部校检一次
validatorTest.valid(); //true || false

// 只校检单条数据
validatorTest.valid('form.username');