MobX – Simple, scalable state management for React
mobxjs.github.io
mobxjs.github.io
It was great to start with, but as the app got larger and more involved, performance started to suffer (from all the different observables and computed triggering and retrigger on a change), memory leaks started to creep in, and eventually I started noticing weird glitches where bits of the UI wouldn't by entirely in-sync. Worse, there was very little I could do to fix it, because the bug was deep in Knockout's "magic". My models had correct data, but sometimes my UI would not.
The lesson I picked up from that was that that sort of magic was bad news, and for my next major project I used React, and when I needed state management I eventually ended up with Redux. I won't lie: There's been some pain points, there's a lot less hand holding, more boilerplate, etc. But performance has been amazing and there's been no issues where something other than my poor coding has caused a bug. Redux code is very, very deterministic: You state looks like X, then you have an event Y, and now your state looks like Z. That state is fed into your component hierarchy, and DOM elements come out the end. If you don't like the result, you can quickly narrow it down to being a bug in your render methods, your reducers, or your actions. No magic.
MobX...looks great. But it looks great in the specific ways that Knockout burned me in the past. Does anyone have any input on that? If I go all-in on Redux and write a very large and interconnected app, I have confidence that:
1) Writing all the reducers and selectors will be pretty big pain
2) Once I do it it'll work just as smoothly as a hello world app will.
If I go all in on MobX, it looks like it'll be easier to write, but...how's it going to run? Saying "inspired by Knockout" gives me distinctly mixed feelings, seeing as how I started using React to get away from Knockout. :)
In practice it turns out to work very well for large apps and many people use it that way (https://twitter.com/_ericelliott/status/766812933804269568)
MobX looks interesting but I am a little concerned that you are claiming it is bug-free.
Things I noted:
1) Agree with your #1. It's a pain of boilerplate.
2) Agree, Redux is very easy to reason about and debug.
2) MobX was definitely much faster to develop.
3) MobX performance was better out the box. I may have done something wrong, however I have noted this with the mortgage example.
4) MobX has its own pain points when trying to build more advanced (tree) data structures. Creating a nested observable object requires creating map objects at every step of the tree. This makes using libraries such as lodash difficult.
5) I prefer the redux dev tool
6) Redux containers works well at the top level, however implementing a reusable container requires more boilerplate code. Since there is no consensus library or approach here - I implement my own solution with caution.
7) It is possible to use both redux and mobx on the same app, but you need to know what you're doing. Additionally you seem to lose some of the benefits of redux when you do this.
8) You can communicate between stores, but I feel this is a bad approach and will lead to messy code.
In the end I chose to proceed with Redux, however I think MobX implemented with proxy objects would be amazing.
I look forward to a framework that sits on the top of React and Redux designed to reduce the boilerplate. Perhaps Vue2 will be what I'm after
The motivation was to reduce boilerplate and improve the readability of redux state transformations. I've found that the number of files I need to touch to create an action drastically decreases.
At this point most of my development time is spent either in the module, the handler, or the saga.
I agree that for most users Redux feels like a lot of boilerplate. At the same time I think most people underestimate were we came from. Personally I wrote a huge amount of Angular code before and at a certain point I felt very unhappy about the two-way data binding and state handling in Angular. It was unpredictable in a huge code base at some point. Then it was the time of Flux and in our company we introduced a stores and unidirectional data flow implementation of our own. Afterwards Redux got announced and we loved the clear constraints and lightweight API from the beginning. We use it now.
In a team of developers everyone can clearly follow state changes, the state itself and the places from where the state changes were triggered. Redux is scaleable and shouldn't be used for every small project which could live without a state management library and should use setState instead. Redux simply works, even though you have already a big amount of actions in production.
I think MobX is on the right path to give an alternative way for state management. For now I see a clear benefit to kick off smaller projects in smaller teams which don't rely on Redux' constraints and scaleability. Little feature op-tins like useStrict will help MobX to have a more scalable state management system. Otherwise in a growing code base it will feel like the old Angular days with two-way data binding. In the end that is the power of MobX, because it isn't opinionated: You can either mutate your state directly in a component or build a proper infrastructure around it to make it scale.
I'm not sure how Redux could be considered complex, the API is very small and the ideas are small as well. There is really not much to learn with Redux. Redux is like literally 100 lines of code if you remove comments and simple sanity checks.
Also, not sure what you mean with boilerplate? What kind of boilerplate do you have when using Redux? Would love to see an example of that.
All that adds up and is a lot of work for a simple component.
We ended up going with a hybrid setup. Our components are all dumb, and our "pages" are the only connected components. We also started using ducks[1] instead of spreading the reducer/actions everywhere whenever it makes sense.
I found myself straining a little to memorize code snippets to get things started.
Once up and running, it's a breeze, though of course I agree with the common sentiment that it's too easy to overuse, and native React state too easy to underuse.
For my next Resct project I intend to go as far as I can with simple container components before I start pulling in the whole Redux toolkit.
In his trainings he constantly sees people trying to rush React and asking him about Redux (which he doesn't cover).
When you get started with React, you should use setState. You should use it until you get the feeling you really need a state management library to deal with most of the setState implementations. That removes the urge to learn another library next to React in the beginning.
Afterwards I agree: MobX is easier at the start, because it can be used similar like setState https://medium.com/@mweststrate/3-reasons-why-i-stopped-usin...
But at some point the developer team might decide to use MobX' useStrict to have more explicit actions and more predictable state changes. It removes the feeling of having two-way data binding and after all goes in the direction of the Redux constraints.
More in depth: https://egghead.io/courses/manage-complex-state-in-react-app...
Refactor a Redux Application to use MobX http://www.robinwieruch.de/mobx-react/
Large MobX React Application https://github.com/rwieruch/favesound-mobx
It's clear what's happening, without a tons of boilerplate code, and it has some nice dev tools as well (trace element updates & events, great for debugging). It also has very useful error messages in development mode (which is a godsend).
On top of that, I think the docs are pretty good, they seem to be quite active on GitHub and, from every piece of the puzzle that comes together to make a 2016 web frontend (react, web pack, babel, flow, ui kit, etc, etc), it's given the least trouble for me so far.
What's crazy is how MobX is able to update React child components without updating the parent first. It knows which properties are accessed in each component, and ensures only the ones that rely on the changed data are updated.
I'd say give it a shot the next time you have a component with internal state. Not having to worry about the reducer or how the component gets updated is refreshing.
This is what blew me away. I understood that "computed" values were doing this, but when I saw that the react components were using it as well, I was sold. I have been in componentWillReceiveProps with redux too much, trying to improve rendering performance. With mobx, out of the box, you get 100% exact render updating.