WebSockets + Reflux + React
Using WebSockets, React and Reflux together can be a beautiful thing, but the intial setup can be a bit of a pain. The below examples attempt to offer one (arguably enjoyable) way to use these tools together.
This trifect works well if you think of things like so:
- Reflux Store: The store fetches, updates and persists data. A store can be a list of items or a single item. Most of the times you reach for
this.statein react should instead live within stores. Stores can listen to other stores as well as to events being fired.
- Reflux Actions: Actions are triggered by components when the component wants to change the state of the store. A store listens to actions and can listen to more than one set of actions.
- React Component: A react component listens to changes in a store and re-renders accordingly. A component can fire actions which then in turn update a store.
- WebSockets: WebSockets allow an event driven approach to frontend programming where the browser and server can just send out and listen to events. WebSocket events should be listened to and triggered in stores and no where else.
- Don't call methods on a store, instead use actions.
- Prefer where possible to have a parent component that passes down data as
propsinstead of listening to stores everywhere.
- All examples are using ES6 and JSX. You'll need a compile stage to run the examples. I recommend WebPack with the JSX and babel plugins.