Have ideas to improve npm?Join in the discussion! »

    clearflux

    0.1.7 • Public • Published

    clearflux NPM version Build Status Dependency Status Coverage percentage

    Install

    $ npm install --save clearflux

    Usage

    初始化 Store 和 Actions

    // ES5
    var Store = require('clearflux').Store;
    var Actions = require('clearflux').Actions;
     
    // ES6
    import {Store, Actions} from 'clearflux';
     
    var myStore = new Store({
      foo: 1,
      foo1: {a: 1}
    });
     
    var myAction = new Actions(myStore, {
      // myAction 初始化时会马上执行
      initStore() {
        // putStore 替换整个指定的属性,第一个参数,称作 Query。
        this.putStore('foo', 2);
        this.putStore('foo1.a', 2);
     
        // patchStore 不会删除数据,只会补充或者修改
        this.patchStore({foo1: {c: 1}});
     
        // putStore 和 patchStore 会触发 myStore.onChange() 监听的事件
     
        // 设置 'foo1.a' 为 loading 状态
        this.startLoading('foo1.a');
     
        // 设置 'foo1.a' 为非 loading 状态
        this.stopLoading('foo1.a');
     
        // startLoading 和 stopLoading 会触发
        // 使用 myStore.onChange(), myStore.onLoading() 监听的事件
     
        // 追加 'foo1.a' 的 errors 信息
        this.setErrors('foo1.a', 'Error Message');
        this.setErrors('foo1.a', ['Error Message']);
     
        // 移除'foo1.a' 所有的错误信息
        this.removeErrors('foo1.a');
     
        // setErrors 和 removeErrors 会触发
        // 使用 myStore.onChange(), myStore.onError() 监听的事件
     
        // putStore 的第二个参数为 promise 对象时,会自动改变 loading 和 error 状态
        this.putStore('foo', Promise.resovle(2));
        this.putStore('foo', Promise.reject('error'));
      },
      updateSomeThing() {
        // some actions
      }
    });
     

    Query

    query 是一种查询对象属性的字符串。允许使用 'a.b.c' 表示 {a: {b: {c: 1}}} 中的 c 属性。 query 也可以是使用&拼接的多个属性。

    使用 Action

    Action 即正常的函数,可以直接调用,不需要额外的设置。

    使用 Store

    Store 可以使用 onChange、onLoading、onError 监听特定的事件。

    • Store.onChange(Query query, callback) 监听query的值、loading 状态、错误信息改变。 callback 接受一个包含 value, loading, errors 属性的对象。

      // 监听 myStore foo 属性的值、loading 状态、错误信息改变。loading 为 布尔值,errors 为数组
      myStore.onChange('foo', ({value: foo, loading, errors}) => {})
      
      // 监听 myStore foo 和 foo.a 属性的值、loading 状态、错误信息改变
      myStore.onChange('foo&foo.a', ({value: foo, loading, errors}) => {})
      
    • Store.onLoading(Query query, callback) 只监听query的 loading 状态改变。callback接受和 onChange 一样的参数

    • Store.onError(Query query, callback) 只监听query的 errors 值改变。callback接受和 onChange 一样的参数

    ChangeLog

    2016-05-03 v0.1.6

    • 去掉 validator,请使用 vajs
    • 升级 lodash to 4+

    2016-05-03 v0.1.5

    • 添加 LightDB 工具
    • 补充部分文档

    License

    MIT © yuanwen

    Keywords

    none

    Install

    npm i clearflux

    DownloadsWeekly Downloads

    10

    Version

    0.1.7

    License

    MIT

    Last publish

    Collaborators

    • avatar