PHPhillips126·Oct 15, 2019
A while back I was building a large application for an internal team at my company. It got to the point where local state was just not solving all of my problems so I started to explore Redux. I had been creating React apps for several years but I could not wrap my head around Redux - it was far too much complexity adding all sorts of actions, reducers, boilerplate, etc. I started looking for alternatives and stumbled upon Mobx which I liked much better and have been using ever since.
Mobx-react[0] felt like much less work with virtually the same outcome. You create a single (or multiple stores), pass it into your app with a
<Provider Store={store}>
<App />
</Provider>
and you are off to the races. When adding the global state to a component, it was super easy:
export default inject('Store')(observer(MyComponent)
Read the rest
)
Or use decorators (requires ejecting create-react-app or modifying the webpack configuration settings):
@inject('Store')
@observer
class MyComponent extends Component {...}
export default MyComponent
Accessing the store:
const {myValues} = this.props.Store
In the store you organize your code by observables (global variables), actions (functions that modify observables) or computed (highly optimized functions that return values derived from state). I treat it as a "source of truth" in a single file.
import {observable, action, computed, decorate} from "mobx"
class Store {
// Observables
myValues = [0, 1, 2, 3, 4]
// Actions
addValue = num => myValues.push(num)
// Computed
get getTotal() {
return myValues.reduce((total, cur) => total + cur)
}
}
decorate(Store, {
myValues: observable,
addValue: action,
getTotal: computed
})
const store = new Store()
export default store
In the end I felt that my code was far more readable and maintainable but your miles may vary.
Here is a relatively simple example of how to use mobx-react demonstrating an observable, action, and computed: https://www.codementor.io/susanadelokiki/managing-state-with...
[0] https://github.com/mobxjs/mobx-react