/smox

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

Primary LanguageJavaScript

smox logo

NPM version NPM downloads

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新版本增加中间件机制,点我查看文档!

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']
})
// @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 App

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)

Demo

Author

License

MIT Inspirated by vuex & immer

smox缩略图