Put Redux Aside, Try MobX

0
React

Mobx

Mobx is a simple, highly scalable state management tool. Like Redux, Mobx is a tool for managing state in React. However, the development experience is better than Redux.

Installation

npm install mobx --save

//For React: 
npm install mobx-react --save

A Simple Counter

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
  @observable
  count = 0;

  @action
  add() {
    this.count ++
  }
  minus() {
    this.count --
  }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
  render() {
    return (
      <div>
        <h2>{ countStore.count }</h2>
        <button key="add" onClick={countStore.add}>+</button>
        <button key="minus" onClick={countStore.minus}>-</button>
      </div>
    )
  }
}

ReactDOM.render(
  <CountComponent/>,
  document.getElementById('root')
)

Article Link:

/en/archive/redux-to-mobx/

# Related Articles