smox's Introduction

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

Docs

smox documents

Install

npm i smox -S

Use

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