RSlim
RSlim是基于Slim的React状态管理拓展库，与其拥有同样的特性，并且还支持State的响应式和计算属性哦
注意
因为RSlim是基于Slim的拓展，所以请在学习RSlim内容之前务必先学习Slim相关内容以免下列内容的核心概念不理解！
安装
标签引入
<script src="https://unpkg.com/rslim/dist/rslim.min.js"></script>
NPM
npm install rslim
快速开始
App.js
import ReactDOM from 'react-dom'
import AppComponent from './AppComponent'
import RSlim, {RSlimProvider} from 'rslim'
// register state
let state = {
count: 0
};
// register reducers
const reducers = {
increment: (state) => {
state.count++;
},
decrement: (state) => {
state.count--
}
}
// register getters
const getters = {
evenOrOdd: (state) => {
return state.count % 2 === 0 ? 'Even' : 'Odd'
}
}
let store = RSlim.createStore({
reducers, state, getters
});
ReactDOM.render(
// inject store with "RSlimProvider"
<RSlimProvider store={store}>
<AppComponent/>
</RSlimProvider>, document.getElementById('app')
)
App.vue：通过RSlimConsumer来获取到全局store对象
import { Component } from 'react';
import './App.css';
import {RSlimConsumer} from 'rslim'
class AppComponent extends Component {
render() {
return (
<RSlimConsumer>
// $store is store instance
// $state is store.state, for confidence
// $cpt is "computed", which register with getters
{({$store, $state, $cpt}) => (
<div id="app">
<div className="btn" onClick={() => {$store.commit('decrement')}}>-</div>
<div id="count">
Clicked:
<span className="tag">{ $state.count }</span>
times, count is
<span className="tag">{ $cpt.evenOrOdd }</span>
.
</div>
<div className="btn" onClick={() => {$store.commit('increment')}}>+</div>
</div>
)}
</RSlimConsumer>
);
}
}
export default AppComponent;