Smox

Fast 1kB state management used New context api and Proxy which is similar to Vuex.

Feature

🐽 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

Docs

smox documents

smox新版本增加 model 机制，点我查看文档！

smox新版本增加中间件机制，点我查看文档！

smox新版本增加 react hooks 支持，点我查看文档！

Install

npm i smox -S

Use

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

React Hooks also is OK

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(mutations, actions, state)
  
  return (
    <div>
      {state.sex}
      <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

API

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)

AndyWee213 / smox

Smox

Feature

Docs

Install

Use

React Hooks also is OK

API

Demo

Author

License

About

Languages