3 ms·
Correct me if I'm misunderstanding, but one thing that worries me about MobX is that it seems leakier than Redux. Something that I really, really care about is
by ng12 10y ago
Correct me if I'm misunderstanding, but one thing that worries me about MobX is that it seems leakier than Redux. Something that I really, really care about is that a well-architected React application should hardly care what the data layer is. The bulk of the application is comprised of dumb/presenter components and only the handful of container components know anything about Redux.
Things like this (from the docs) make me nervous:
const TodoView = observer(({todo}) =>
<li>
<input
type="checkbox"
checked={todo.finished}
onClick={() => todo.finished = !todo.finished}
/>{todo.title}
</li>
)
TodoView is a dumb component that operates simple data passed via props, but now it needs to know that it's an observer and presumably rely on some facet of MobX to work?
- cheapsteak 10y agoYou can easily maintain the abstraction of dumb components if you wish to: const TodoView = ({title, isFinished, onClick}) => ( <li> <input type="checkbox" checked={isFinished} onClick={onClick} />{title} </li> ) const TodoViewContainer = observer({todo} => ( <TodoView title={todo.title} isFinished={todo.finished} onClick={() => todo.finished = !todo.finished} /> )) But how often are you changing your app's data layer? Is the tradeoff _always_ worth it? Mobx allows you to be as pragmatic or dogmatic as you choose to be
- ng12 10y ago> But how often are you changing your app's data layer? Is the tradeoff _always_ worth it? Yes, because in my mind that's the litmus test that your app is properly data-agnostic. And a key thing about Redux is it stays that way -- it's actually difficult to leak your data store to child components. Even if I adopt the above approach with MobX it'd be incredibly easy for some other developer to start passing around stores everywhere. My gut feeling is that MobX would be great for a personal project but doesn't scale that well.
- gitaarik 10y agoI've had a presentation about this a short while ago. It's easy to do both ways with MobX. You can have smart components and dump components however you want them. You have this with Redux too, but the most standard way in Redux is to use connect() and that makes components dump anyway.