Fast 1kB state management used New context api and Proxy which is similar to Vuex.
🐽 New Context Api used and Api is similar to Vuex
🎃 Tiny size, 1Kb gzipped, no Dependencies
👻 High Performance without optimization because ES6 Proxy
🙀 Great Model and Middleware mechanisms supported
npm i smox -Ssmox 新版本支持 model 机制拆分，以下代码默认是 单model，大型项目需要拆分 model，请参阅文档
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app.js'
import { Store, Provider } from 'smox'
const state = {
count: 2
}
const actions = {
asyncAdd({ commit }) {
setTimeout(() => {
commit('add')
}, 1000)
}
}
const mutations = {
add(state) {
state.count += 1
},
cut(state) {
state.count -= 1
}
}
const store = new Store({ state, mutations, actions })
ReactDOM.render(
<Provider store = {store}>
<App />
</Provider>,
document.getElementById('root')
)then app.js
import React from 'react'
import { map } from 'smox'
@map({
state: ['count'],
mutations: ['add', 'cut'],
actions: ['asyncAdd']
})
// @map({
// mutations: { add ,cut },
// actions: { asyncAdd }
// })
// ↑ Function as import is also OK
class App extends React.Component {
render() {
return (
<div>
<h1>现在是{this.props.count}</h1>
<button onClick={this.props.add}>加一</button>
<button onClick={this.props.cut}>减一</button>
<button onClick={this.props.asyncAdd}>异步加一</button>
</div>
)
}
}
export default Appif you only SetState , there is also a produce API to optimize performance
import React from 'react'
import { produce } from 'smox'
class App extends React.Component {
onClick = () => {
this.setState(
produce(state => {
state.count += 1
})
)
}
}
export default App-
store.state
-
store.mutations
-
store.actions
-
store.commit(mutation)
-
store.dispatch(action)
-
store.subscribe(sub)
-
map({ state:[], mutations:[], actions:[] })
-
produce(state,producer)
- blog: 伊撒尔の窝
- weibo: @世界倒数第一公主殿下
MIT Inspirated by vuex & immer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent