Giampaolo Bellavite gpbl

Reflux stores and actions in a Master/Detail app

Example and reasonings when using Reflux stores and actions for a Master/Detail app with React – with an eye to server-side rendering. Some concepts apply to reflux#166 and reflux#180.

Requirements

Must work with a router

This hypotetical app would use a router to display a list of items (e.g. at the url example.org/items, the master view) and a single item (e.g. example.org/items/:id, the detail view).

	import React from "react";
	import { FluxibleMixin } from "fluxible";

	/**
	* Make a Component listen to fluxible stores and pass the object returned by
	* getState as props to Component.
	*
	* Heavily inspired by this article from @dan_abramov
	* https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
	*

	// Add a listenTo() method to listen to a specific store event (see comment for an example)

	const EventListenerMixin = {

	componentDidMount() {
	this._storeEventListeners = [];
	},

	listenTo(store, eventName, handler) {
	if (!handler) {

	import createStore from 'fluxible/utils/createStore';
	import hashObject from 'hash-object';
	import { omit } from 'lodash';

	const debug = require('debug')('App:StatusStore');

	const StatusStore = createStore({
	storeName: 'StatusStore',

	handlers: {