咦?我为什么要说又?不管了,反正是个轮子。。。

主要吧就是我嫌用Redux太墨迹了,所以造了这个轮子,方便自己隔应他人(23333...)

说来简单,Flux是什么我就不解释了,直接贴():

  ╔═════════╗       ╔════════╗       ╔═════════════════╗
  ║ Actions ║──────>║ Stores ║──────>║ View Components ║
  ╚═════════╝       ╚════════╝       ╚═════════════════╝
       ^                                      \
       └──────────────────────────────────────┘

  注意:图片仅仅是FLUX思想,而不是Facebook的实现。

妈个鸡这不是图片,我个骗纸T_T。。。

不管了,我的模块叫做Alux,就是Alxw和Flux各取俩字母啦啦啦~~~

简单看下我的Demo,说实话除了Demo我的Readme什么都没写2333...

//Import module
import Alux from 'alux';
import React from 'react';
import ReactDOM from 'react-dom';

//Define events
let events = {
  CHANGE_NAME : Symbol()
};

//Combine reducers
let reducers = Alux.combineReducers({
  change(action, state = {name:'Alxw'}) {
    switch (action.type)
    {
      case events.CHANGE_NAME:
        let ret = Object.assign({}, state);
        ret.name = action.name;
        return ret;
      break;
      default:
        return state;
      break;
    }
  }
});

//Create store
let store = Alux.createStore(reducers);

//Combine actions
let actions = Alux.combineActions({
  change() {
    return {
      type : events.CHANGE_NAME,
      name : 'SpringHack'
    }
  }
}, store);

//Connect react component
class App extends React.Component {
  constructor(props) {
    super(props);
    store.connect(this);
  }
  render() {
    return (
        <div>
            I love {this.state.alux.change.name} !<br />
            <button onClick={actions.change}>Change</button>
        </div>
    );
  }
}

//Render component
ReactDOM.render(<App />, document.getElementById('container'));

我想说,是不是简单了好多的样子?其实模块就导出了三个方法:cerateStore, combineReducers, combineActions。

其中Store的实例有两个方法,一个connect一个dispatch,不过combineActions的时候传入了Store的实例,之后就不需要在调用分发事件的方法了。当然,你也可以直接用:

store.dispatch({
  type : CHANGE_NAME,
  name : 'SpringHack'
});

这种形式就是不太好而已。。。

每个reducer有自己的namespace,和redux类似。当然如果创建store实例的时候传入的reducer是纯函数就没有namespace了哦。

默认对state做更改,在this.state.alux下面,使用react的setState方法,所以要不要更新,自己在shouldComponentUpdate判断下吧,我这里懒得写了--

创建Store实例的时候,可以传入纯函数的Reducer,也可以是组合的Reducers,但是不能够是多个Reducers再次组合(我想此刻肯定有人去试手了。。。)

怎么说,就是Redux自己用的不爽而已,造个轮子自己也能加深印象。代码在Github,ES2015用babel编译的。

哦,对了,发布到npmjs.com(https://www.npmjs.com/package/alux)了,可以直接:

npm install alux

来安装了哦~~~