0.0.3 • Published 8 years ago

s-flux v0.0.3

Weekly downloads
4
License
ISC
Repository
github
Last release
8 years ago

s-flux:a simple flux lib (测试版)

介绍

一个简单的flux工具库,支持单页应用和多页应用,支持同步action和异步action。

安装

依赖'es6-promise', npm模块指向dist/s-flux.common.jsdist/s-flux.jsdis/s-flux.min.js为浏览器直接引用,为UMD模块,es6-promise已经打包在内。

  • 浏览器直接引用:
<script src="s-flux/dist/s-flux.min.js"></script>
<script>
var Store = SFlux.Store;
var createAction = SFlux.createAction;
//...
</script>
  • commonjs模块引用:
import {Store, createAction} form 's-flux';
// or
var SFlux = require('s-flux');

API

  • Store: 数据仓库基类
// app-store.js
import {Store} from 's-flux';

// 创建一个store
var appStore = module.exports = new Store({
  // 初始化状态
  initialState = {},

  // 数据更新: mutation => {type: 'mutation type', data: 'mutation data'}
  mutation = function(state, mutation) {
    return state;
  },

  // 子模块:{key: childStore}
  modules = {},

  // 中间件
  middlewares = [],

  // store名,便于调试用
  name = 'store'
});
  • createMutationTypes: 创建一组数据更新常量
// mutation-types.js
import {createMutationTypes} from 's-flux';

module.exports = createMutationTypes({
  'INCREMENT',
  'DECREMENT',
  'OTHER',
  'BEFORE_SUBMIT',
  'SUBMIT'
});
  • createAction: 创建一个action
// actions.js
import {createAction} from 's-flux';

export var submit = createAction(function(params, {store, error, dispatch}) {
  dispatch({
    type: 'BEFORE_SUBMIT'
  }, true);

  //异步action
  setTimeout(function() {
    dispatch({
      type: 'SUBMIT',
      data: '111'
    });
  });
});
  • setGlobalStore: 注册一个全局store, 这样不要每次调用action的时候传入
// app.js
import {setGlobalStore} from 's-flux';
import appStore from './app-store';
import mutationTypes from './mutation-types';
import {submit} from './actions';

// 注册全局store
setGlobalStore(appStore);

// 调用action
console.log('loading……')
submit({})
  .then(function(data) {
    console.log('success……')
  })
  .catch(function(error) {
    /console.log('error……')
  });