Open yinguangyao opened 5 years ago
基于redux改进后的状态管理库 —— rex
在使用了mobx之后,我深深爱上了mobx那种面向对象创建store的思想,对redux的view -> dispatch -> action -> reducer -> store -> view的形式深恶痛绝,于是就开始思考如果用class来创建store的话会怎么样? 于是,rex就诞生了。
装饰器state用来包裹需要监听的状态,而action则是包裹改变state的函数,在外部调用action包裹方法的时候,内部会自动调用dispatch函数,以确保通知view层状态发生了变化。 如果不用state包裹的属性,那么就会当做一个私有属性来处理,不会出现在store中。
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> )
rex的思路和redux并没有本质区别,只是在用法上有一些细微差异。 store的创建必须通过class,而不是reducer。通过action装饰器包裹的函数在执行时会自动使用dispatch,不用手动调用dispatch,将dispatch -> action -> reducer简化为了一步。
这个库在一定程度上借鉴了redux和mobx的思想,将其两者做了一个结合,使用面向对象的形式来写redux,各方面和redux保持一致,但是操作却简化了不少。
rex
基于redux改进后的状态管理库 —— rex
设计思想
在使用了mobx之后,我深深爱上了mobx那种面向对象创建store的思想,对redux的view -> dispatch -> action -> reducer -> store -> view的形式深恶痛绝,于是就开始思考如果用class来创建store的话会怎么样? 于是,rex就诞生了。
state、action
装饰器state用来包裹需要监听的状态,而action则是包裹改变state的函数,在外部调用action包裹方法的时候,内部会自动调用dispatch函数,以确保通知view层状态发生了变化。 如果不用state包裹的属性,那么就会当做一个私有属性来处理,不会出现在store中。
BaseStore
BaseStore是一个基础类,在BaseStore中封装了很多私有函数,用于处理一些底层的逻辑。创建store的时候一定要继承这个基础的BaseStore类,类与类之间可以互相组合。
使用方法
和redux的区别
rex的思路和redux并没有本质区别,只是在用法上有一些细微差异。 store的创建必须通过class,而不是reducer。通过action装饰器包裹的函数在执行时会自动使用dispatch,不用手动调用dispatch,将dispatch -> action -> reducer简化为了一步。
结论
这个库在一定程度上借鉴了redux和mobx的思想,将其两者做了一个结合,使用面向对象的形式来写redux,各方面和redux保持一致,但是操作却简化了不少。