• The following will strictly follow the following three points

    • Each piece of this section is meant to blow one of the two
    • How to hack the other one to better achieve the effect of blowing
    • Blow it well, black without a trace

  • Why can these two libraries be compared

    1. Purpose is consistent

    Are state management libraries that manage the internal state of applications

    1. The audience is generally the same

    React is usually used in react, although it’s not necessary. You can use it in Vue or Angular, but in most cases, it’s not

    1. interchangeable

    At the beginning of the project, you could choose one or the other to meet your needs, but one day you suddenly feel that the other is more like you, you can take the time to migrate, and you’ll find that it seems to meet those needs as well

  1. Comparison of learning difficulty:

    • In mobX learning, you can listen to the myth of 30 minute quickstart. This isn’t the 7 Days from Start to Master series for one language, after all, because it’s really easy, and after 30 minutes, the only time you have to spend is occasionally flipping through a document to get comfortable using it.
    • Getting started with Redux isn’t that hard. Even though some of the concepts are abstract, it can take up to half an hour to master them, but when you actually use them, you’ll find that it’s not as easy as you thought, and you’ll have to spend more time learning more:

    So when you need to be asynchronous, you have to think about redux-thunk, how can you not be asynchronous and want to use Promise, okay, so let’s look at redux-Promise-middleware and want to keep a log or something like that, Redux-logger is ready for when you need to calculate a value using two values in state, and you don’t want to do that if you’re a bit squeaky clean, you need something called Reselect…

    The first black good, you have not flinch

  2. Workload comparison (the following code is directly tested in nodeJS) :

    • In general, this should be done with an example like a couter
  const { createStore } = require('redux')
  const ADD = 'ADD'
  const initState = {count: 0}
  // action
  function counter(state = initState, action) {
    switch(action.type) {
      case ADD:
        return{... state,count: state.count + action.payload.count}
      default:
        return state
    }
  }
  // reducer
  const AddOne = (a)= > ({type: ADD, payload: {count:1}})
  // store
  const store = createStore(counter)
  store.subscribe((a)= > console.log(store.getState()))
  setInterval((a)= > store.dispatch(AddOne()), 1000)
Copy the code

It’s about 15 lines, excluding comments, so mobx should try to control its size if it wants to be overwhelming

  • A Mobx counter would look something like this
  const { observable, autorun } = require('mobx')
  const appState = observable({
    counter: 0,
    add(value){this.counter += value}
  })
  autorun((a)= > console.log(appState.counter))
  setInterval((a)= > appState.add(1), 1000)
Copy the code

It seems to take only seven lines, about half the size of redux’s implementation

Oh my God, that’s so many lines of code, do I have to knock off now?

  • Size is just something that floats on the surface, something that’s more application-friendly, that’s the core point

    • In the writingreduxtheaction“Is always neededExtend the statementorObject.assign()To get a new onestateThis is a very important pointJavaScriptIs a shallow copy of the object, its memory overhead is definitely greater thanmobXThere is a much larger way to directly manipulate object properties as in.

    Compared with 6, this point can be regarded as a serious problem

The above content black protagonist is clearly belong toreduxWell, what if we look at it from a different perspective
  1. Concentration of state management:
    • mobXIt reads like this:
      const {observable} = require('mobx')
  const appState = observable({ counter: 0 })
  appState.counter += 1
Copy the code

    Change the status directly? This andreactIt’s totally against the theory. How can it bereactIf my status is quietly changed by a colleague, it could cause a war. Let’s go to strict mode.

    • What you saidreduxHow’s it going? Try not to passactionupdatestateOf course not.
  2. The need for boilerplate code:
    • For boilerplate code, you have to trace backreduxThe basic design of thereduxThree principles:
      • Single data source
      • State is read-only
      • Using pure functions to perform changes so you can say that the sample code guarantees thatstateThe manageability of the state of, after all, everything is completely separate, minimizing the possibility of errors and the cost of finding problems.

Above, mobX is easy to get started and quick to build, but when the project is big enough, use Redux. If you really love mobX, turn on strict mode and add a set of state management specifications.