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
smox新版本增加 react hooks 支持,点我查看文档!
npm i smox -S
smox 新版本支持 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']
})
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 App
there is a useSmox
API that is similar to useReducer
API , for example:
import React from 'react'
import { useSmox } from 'smox'
const mutations = {
change(state) {
state.sex = state.sex === 'boy' ? 'girl' : 'boy'
}
}
const actions = {
asyncChange({ commit }, payload) {
setTimeout(() => {
commit('change', payload)
}, 1000)
}
}
const state = {
sex: 'boy'
}
export const Sex = () => {
const [state, commit, dispatch] = useSmox(state, mutations, actions)
return (
<div>
<h1>{state.sex}</h1>
<button onClick={() => commit('change')}>变性</button>
<button onClick={() => dispatch('asyncChange')}>异步变性</button>
</div>
)
}
if 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)
-
useSmox(mutations,actions,state)
- blog: 伊撒尔の窝
- weibo: @世界倒数第一公主殿下