浅谈一种新的状态管理实现

rex

基于redux改进后的状态管理库 —— rex

设计思想

在使用了mobx之后，我深深爱上了mobx那种面向对象创建store的思想，对redux的view -> dispatch -> action -> reducer -> store -> view的形式深恶痛绝，于是就开始思考如果用class来创建store的话会怎么样？于是，rex就诞生了。 image_1d8ncob8d1hki1gtmma21ol21hh99.png-36.4kB

state、action

装饰器state用来包裹需要监听的状态，而action则是包裹改变state的函数，在外部调用action包裹方法的时候，内部会自动调用dispatch函数，以确保通知view层状态发生了变化。如果不用state包裹的属性，那么就会当做一个私有属性来处理，不会出现在store中。

BaseStore

BaseStore是一个基础类，在BaseStore中封装了很多私有函数，用于处理一些底层的逻辑。创建store的时候一定要继承这个基础的BaseStore类，类与类之间可以互相组合。

使用方法

// 如何创建一个store
import {
    action,
    state,
    BaseStore
} from 'rex';
class Counter extends BaseStore {
    @state count = 0;
    @action
    increase() {
        this.count += 1;
    }
    @action
    decrease() {
        this.count -= 1;
    }
}
const counter = Counter.createStore();
export default counter;

// 如何结合react-redux使用
ReactDOM.render(
  <Provider store={counter}>
    <App />
  </Provider>,
  document.getElementById('app')
)

export default connect(state => ({ 
    count: state.count,
    increase: state.increase,
    decrease: state.decrease
}))(props => 
  <div>
    <button onClick={() => props.increase()}>+</button>
    {props.count}
    <button onClick={() => props.decrease()}>-</button>
  </div>
)

和redux的区别

rex的思路和redux并没有本质区别，只是在用法上有一些细微差异。 store的创建必须通过class，而不是reducer。通过action装饰器包裹的函数在执行时会自动使用dispatch，不用手动调用dispatch，将dispatch -> action -> reducer简化为了一步。

结论

这个库在一定程度上借鉴了redux和mobx的思想，将其两者做了一个结合，使用面向对象的形式来写redux，各方面和redux保持一致，但是操作却简化了不少。

yinguangyao / blog