Thanks for the reply! I’ll address each of your points in turn:
- I dislike the variable/function approach simply because it takes the user out of the ‘flow’ of the code as they scroll to see what would be returned — whereas the IIFE embeds the logic right in the JSX. However, I’ve had several comments about extracting the conditional into a subcomponent, and I think I’m going to update the article to recommend this approach.
- We actually don’t use inject at all! We’ve been successful just passing stores down through components as needed. Inject seems great in theory but right now it adds a bit of complexity that we don’t need — might as well stick to explicit data flow.
- This has been an ongoing discussion on the team. We’re trending towards using observables everywhere instead of setState for a more uniform approach, but haven’t committed to a full refactor to this effect.
- We have several stores and models — we’re trying out an approach you can see catch a glimpse of here. Essentially we use stores to store models and collections of models, which are initialized by id within a single state tree. However, we do allow direct modification of stores within components.
Like you said there’s a lot more to said about MobX + React. My current feeling is that we are not using the library to its full potential, so I don’t feel 100% confident putting out a ‘Best Practices’ article — but would love to share our approach so as to elicit feedback from the community. Would also love to hear more about your approach to MobX and react!