Halo, hello, I’m 132, and this is HHH for the first time

background

During the development of React project, we deeply felt the “ugly and annoying” of Redux. Some people tried to transform it, such as DVA and Rematch. They directly remelted and regenerated Redux grammar sugar, which completely got rid of the limitations of Redux. And embrace “new features.”

The rematch author’s article states that tool quality = time saved by tool/time spent using the tool

Let’s use this formula to get a feel for smox’s tool quality

The simplified API

It is worth mentioning that The API of Smox is consistent with vuex, which I think is the best state management API. Although Vue is rejected by React users, I still can’t deny it completely. Good is good

So Smox took advantage of Vuex and the API became something like this:

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((a)= > {
      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'))Copy the code

Feel, have written vue is not feeling more pleasing to the eye

In fact, THE APIS of DVA and Rematch are almost the same, but Mutations of Smox correspond to their reducers and Actions correspond to effects

So what’s the difference between an almost identical API?

Simple comparison with rematch

Let’s take a look at rematch:

    add(state, payload) {
      return state + payload
    }
Copy the code

It passes state as an argument, but when it returns it changes the argument. This is not a pure function, and we need to manually optimize performance

Smox, on the other hand, uses Proxy to hijack objects without return, and can accurately hijack changes

    add(state, payload) {
      state.count += payload
    }
Copy the code

From this mechanic, it’s clear smox is on the right track

In addition, there are several issues with Rematch, such as the inability to get rid of the limitations of action Type and not encapsulating Connect

As for DVA, I haven’t really studied its source code, but it’s not really a tool, it’s a framework, and I personally don’t advocate that

Above, through simple comparison between Smox and Rematch, we can feel Smox directly

In addition to using the Proxy API, Smox also uses the New Context API, which was first used in Smox before The release of Update 16.3

If you use it, you still need to download redux, React-Redux and other libraries. The size is quite bulky, but Smox completely abandoned Redux and Gzipped 1KB

Still need to improve

Smox is coming with major enhancements, such as middleware mechanisms

conclusion

Let’s review the formula: Tool quality = time saved by tool/time spent using the tool

Determine the…

Finally attach smox making address: https://github.com/132yse/smox

For star, bug, issue and PR

Then the document address: https://smox.js.org/

Ha ha ha, working time touch fish, slip slip!