Example: real-life with router/ajax etc

[Keats]

I'm aware that you are currently working on 2.0 but once it's released, an example on how to make a small app with routing/ajax queries would be great for people like me using react-router/redux to get a feel of how it looks with mobservable.

[geohuz]

+1

[mweststrate]

This question definitely deserves a better answer, but in short:

1. For async actions nothing special needs to be done, just modify state before and after completion :). See also: http://mweststrate.github.io/mobservable/best/actions.html
2. Routing was written by some team mates of mine, but I looked into it, we use react-router and there is nothing special in there I think. Routes matches certain components, which upon mounting extract the necessary params to update the state, kick off requests etc. Just make sure components render something valid before and after the necessary requests are made (see also the async point).
3. In the mobservable-react-todomvc example the director router library is used, which also just works fine.

[ikido]

Hi guys, I'm actually working on this and hopefully will be able to share an example app soon. I wrote simple relations lib (https://github.com/ikido/mobservable-model), I'll publish the docs soon and then finish up the example. What kind of application you would like to see? I was working on simple list of github users and repos, but maybe there will be better ideas. Really love mobx, let's spread the word =)

[Keats]

I think what was missing early on for redux (and arguably still now) is something like a auth route so to use github users/repos as an example: a small app to favorite repos.

3 routes:

• index: preload liked repos if logged in otherwise show a message telling to login
• login: basic login that does a (fake) ajax call and set something in localstorage to make the user logged in
• add: login protect page, to add a repo to the liked list

From our app (react/redux), the most tricky part was to preload data and handle all the possible errors generically, we ended up with a custom middleware that checks the ajax status code and do different things, ie 401 -> logout, etc

[ikido]

@Keats what's so tricky about the middleware? Mobx is not going to solve this for you, you still need to make a request and then act upon results. You just don't need a special middleware, you can make a request from any place in your code. Are you asking where to put this logic in app using mobx?

[mweststrate]

Does somebody know a challenge or standard app that has this kind of complexity?

TodoMVC has been ported to Mobservable and has routing but not authentication (will update it to MobX soonish). The real world example from Redux also doesn't seem to have authentication (otherwise that might be an interesting one to rebuild using MobX, maybe I do that anyway). All apps with authentication I've build so far are closed source. Although it is actually in practice quite simple, just have some observable that identifies whether people are logged in or not available through some store, context or global state. But it would be good to have an example nonetheless.

[ikido]

Problem with real world example from redux is that they support only reading, while a lot of apps are actually CRUD. My idea is to have simple app with github login that will show you some data and will allow you to manipulate it — list of favourites is a good example. I wonder why authentication is a challenge, you just make a request and store authentication status along with a token and user data. @mweststrate do you think it will be ok to use github login or should I use local auth?

[Keats]

The issue with authentication was more with react-router and how to check login status before transitioning so more of a router issue.

Unrelated but would you put component state in mobx as well (ie only have stateless components) or have statetul components?

[mweststrate]

@ikido looking really forward to the app!

I just updated the TodoMVC example to mobx as well, it contains at least routing and data (de) serialization:

@Keats Except for maybe some local ui state, It is usually very pleasant to not store ui state in components themselves. Note btw that you can use the @observable and @computed decorators inside react component classes. This works as expected and a valid alternative to using React's own state mechanism. It avoids running into bugs where for example setState didn't update the state object yet due to the asynchronous nature of setState.

[Keats]

@mweststrate I'll also try to mix https://github.com/trueadm/inferno stateless components and mobx once they release the next version of inferno as well.

[DjebbZ]

There's CRUD in this app, but André Staltz from Cycle.js created an interesting challenge regarding async :https://github.com/staltz/flux-challenge

It may be worth it to implement it with mobx

[mweststrate]

@DjebbZ that was already done :) https://github.com/staltz/flux-challenge/blob/master/submissions/mweststrate/index.tsx

Although it is slightly outdated (it uses mobservable instead of mobx but I think the only technical difference is that autorunUntil is now called when). I'll try to find some time to update it.

[DjebbZ]

Oh didn't see it, since submissions are classified by username and not techno. Good !

[mweststrate]

Here are some other cool MobX based projects:

• https://github.com/nightwolfz/mobx-starter: routing, server side rendering, async / await, context-based store passing (see also #148)
• https://github.com/contacts-mvc/mobx-react-typescript: includes routing, typescript

[cj]

@nightwolfz any reason you deleted mobx-starter? I'd love to check it out.

[mweststrate]

@cj it was retracted by his employer. Too much competitive advantages I guess :smile: :sob:

[mweststrate]

In the mean time, I ported https://github.com/mweststrate/react-particles-experiment to MobX, nice example if you want to do MobX + Flux action dispatching.

[mweststrate]

Here is a single stack overflow answer that does routing, authentication, ajax and context based store passing: http://stackoverflow.com/a/36164488/1983583

[foxhound87]

I made an example app with some cool features with the main goal to keep things in the simplest possible way. It uses React + Feathers + Mobx and called it RFX stack :D

I think the challenge is to reduce the amount of dependencies required to start up a decent react project and would be nice for the community to have a mini-framework to deal with react out of the box without adding 50+ dependencies or compromise flexibility.

take a look: https://github.com/foxhound87/rfx-stack

I hope it can help someone, if you like it or would like to contribute, let me know and don't forget to star the repo!

[simpixelated]

Thanks @foxhound87 and @mweststrate for the examples! The app from your Stack Overflow answer is particularly helpful: https://github.com/contacts-mvc/mobx-react-typescript

I'm slowly converting a redux app to mobx and the only problem has been creating a pattern for the architecture. Examples projects using async, routing, authentication, etc. are super helpful, unfortunately mobx just isn't as popular as redux (yet), so there's not a lot out there. So every bit helps. Thanks!

[mweststrate]

@andykog just added server side rendering and server communication to the TodoMVC example repo :) https://github.com/mobxjs/mobx-react-todomvc

[mweststrate]

Example of server side rendering + routing with react-router by @kuuup: https://github.com/kuuup/mobx-ssr-example

[vinej]

I just did an example of React/Mobx using a Flux pattern inspired by Redux. The example is complete with a REST server. I hope it will give some ideas to others. For the moment, it's only a proof of concept.

https://github.com/vinej/react-portal

Thanks

[luisherranz]

@vinej very interesting 👍

[otbe]

Throwing DWatch into the pot. Powered by mobx, react(-)router, IOC, REST API .... bundled as an electron app.

https://github.com/Mercateo/dwatch

[mweststrate]

This might help with building a form abstraction: https://jsfiddle.net/royriojas/qp5p33cn/

Spectacle Editor is being build with MobX (really cool!) blog, source

Also the Mendix Webmodeler is being build using MobX, more information will probably follow soon: unofficial recording

[vinej]

I will try the form abstraction in my example. It's going to simplify my code.

Thanks

[mweststrate]

Also a nice overview: https://github.com/xgrommx/mobx-ecosystem

[mweststrate]

Nice abstractions for forms: https://github.com/royriojas/mobx-form and another form abstraction: https://jsfiddle.net/darthapo/k63ujjsp/

[vinej]

The React example of a Flux implementation with Mobx as changed a lot recently to follow the best practices of React

Now stores are passed as props to Component to help with unit testing and props are validated with 'PropsType' and Models. After a while I have found that I need to define models in order to validate the props properly with something like : React.PropTypes.shape(TodoModel.shape()). The next step will be to add some unit tests examples with mocha and chai.

take a look : https://github.com/vinej/react-portal

Thanks

[mweststrate]

I just compiled all usable projects I'm aware of into one list. Items might be missing so feel free to add items! http://mobxjs.github.io/mobx/faq/related.html

[nightwolfz]

Mobx-starter is back !

https://github.com/nightwolfz/mobx-starter

[iam4x]

I'm also building a new universal/isomorphic boilerplate with latests libraries (react-hot-loader@3 webpack@2 css-modules postcss and mobx)

https://github.com/iam4x/futureRX

[mweststrate]

@nightwolfz w00t!

@iam4x looking cool!

I'll add both to the related projects section soon!

[vinej]

I created a simple version of the flux pattern I developed for the react-portal : ReMux

https://www.github.com/vinej/react-remux

Thanks

[eswat2]

i worked on this simple app after talking the egghead.io class on Build Your First React.js App:

https://github.com/eswat2/egghead-mobx

The whole point was to explore adding a state management framework to the original app from the course. I started out thinking i'd use Redux, but finally went with Mobx instead. Some of the features include;

• refined UI elements
• a store built on Mobx
• uses axios for all api calls
• a notes REST api
• a simple html5 pushstate mechanism
• saves last valid username to local storage
• initializes app from URL if it matches /profile/:username
• otherwise it reloads last username from local storage
• a simple navigator for visited usernames

It doesn't use a router, everything is managed thru the store.

If you'd like to see it in action, it's been deployed to heroku:

https://egghead-mobx.herokuapp.com

The details on how this was deployed can be found in this repo:

https://github.com/eswat2/heroku-egghead-mobx

This deployment includes a simple notes REST api which persists notes to a mongodb instance running on mlab.

I realize that this doesn't meet all of the requirements for this thread, but i hope it can be useful to some of you. I know it's opened my eyes to a new way of thinking about building apps.

[mweststrate]

Thanks for sharing!

[Keats]

How are people handling fetching data before rendering a route in react-router? a store that keeps track of prefetch request and you observe the status at the top level and render nothing/a loading screen if there is a promise?

[mweststrate]

You can store the request / response in a store. mobxUtil.fromPromise is useful for that. See https://medium.com/@mweststrate/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37 for some examples

Op wo 31 aug. 2016 om 21:50 schreef Vincent Prouillet < notifications@github.com>:

How are people handling fetching data before rendering a route in react-router? a store that keeps track of prefetch request and you observe the status at the top level and render nothing/a loading screen if there is a promise?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx/issues/104#issuecomment-243879715, or mute the thread https://github.com/notifications/unsubscribe-auth/ABvGhO25A9X18gybXXNuVOuWM3-wvuNwks5qldr6gaJpZM4HPyji .

[rstudner]

@nightwolfz, @iam4x - have you two thought of combining your efforts? I'm looking for a mobx boilerplate to start a project and just like in the react/redux land -- the # of choices causes analysis paralysis hah.

[nightwolfz]

@rstudner That will be difficult since we took different approaches. I want mobx-starter to just be the minimum required to run a production ready website.

[tiagowippel]

Hi, I created a simple CRUD example using Mobx + Material-UI.

https://github.com/tiagowippel/mobx-crud

[hawkins]

We have a number of resources on this issue and even more over at the MobX awesome list, including those with react router and redux, like the original question asked for - is this issue safe to be closed?

[mweststrate]

Somehow https://github.com/gothinkster/react-mobx-realworld-example-app is still missing in this thread....

[mweststrate]

Closing this issue as the awesome list linked above serves this purpose now