Classux 简明教程

王健

前言:为什么要用classux

React的状态管理库有很多,flux, reflux, redux, mobx等等, 而这次就让我来安利下@乔森 同学的classux。classux最主要的特点就是利用decorator的特性,带来了很多语法上的便利以及使用上的灵活。Github

action

//action 就是 String, 通过store.dispatch 可以传递 payload
import DeployStore from 'stores/DeployStore';  
export const loadPendingList = (params,) =>  
  DeployStore.dispatch('loadPendingList', params);

Store

创建一个业务模块相关的store

class DeployStore extends Store {  
  // hit action
  // 实际是将方法添加的Store.prototype上去
  @Reducer('loadPendingList')  
  async loadPendingList(params) {
    const data = await Api.call ...
    const state = this.getState();
    // update state with data;
    return state;
  }
}
// initial state 
export default new DeployStore({  
  pendingList: [] 
})

@Store.connect

利用Decorator将数据从特定Store绑定到Component的state中; 对比redux是则从顶层store将数据绑定到Component的props中去; 此外通过这种方式的连接,当我们的Store更新时,会自动调用Component的SetState方法,背后的实现则是依赖了Store.onUpdate.

@DeployStore.connect(state => ({
  list: state.get('pendingList'),
}))
export default class extends React.Component {  
 ....
}

@Store.onUpdate

利用Decorator监听特定的action

class xxx {  
@DeployStore.onUpdate('loadPendingList')
afterLoadingPendingList(storeState, action, param) {  
   // 执行完action:loadPendingList后调用
   // 需要注意的是:
   // a).此时StoreState有可能还没有完全同步到Component
   // b).通过判断param 来区分多个实例
   // setState ? dispatchAnotherAction ? do what you want
   ...
 }
}

源码

相对而言, classux的源码比较的简单, 只有200行左右, 里面用到了很多ES6的新特性,是阅读源码的非常好的选择。 onUpdate

最后

frontend = (data) => view