[ng12]

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]

You 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]

> 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]

I'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.