Model-View-Intent with React and RxJS
Mar 05, 2016
If you are using Facebook's React, you would have come across Flux, an unidirectional data flow architecture that facebook suggests to use with React. Unfortunately, the Flux overview is light on some details and even after looking at the tutorial code, I still found Flux to be somewhat complicated for what it wants to achieve. So I was looking for Flux alternatives and I came across this excellent post on how to implement the ubiquitous Model-View-Controller pattern in a reactive way. Using that I was able to build a simple example with unidirectional data flow. I also used a REST API as opposed to using a JavaScript object as a data store.
The rest of this post describes how the example was implemented. If you'd rather just skip all that and just look at the code, it is available here.
What the example application does
Our example application is oversimplified, but I think it illustrates how to use React in a realistic fashion. Most Flux examples I've come across just use a JavaScript object as a data store, whereas in typical web applications, the actual data store is elsewhere and you make ajax calls to interface to it. Typical operations are — read data, delete/update data and add new data. Accordingly, our example application will display a list of users, allow us to delete users from that list and to create new users.
An overview of the implementation
Our example application has the following JavaScript modules:
- UserView — A React component which is our View module. It displays a list of users and also allows us to delete/create users.
- UserStore — A data store which is the Model. It talks to a REST API to get a list of users, to delete a user and to create a user.
- UserIntent — The Intent object.