How to use fluxible - 10 common examples

beforeEach(function () {
    testProps.context = createMockComponentContext({
      stores: [ApplicationStore, BackgroundStore]
    });
    var htmlElement = HtmlComponent(testProps);

    // This enables dom render after HtmlComponent factory call.
    // This mimics what really happens.
    testDom.start();

    // Go ahead and renderIntoDocument. Keep reference in htmlComponent.
    htmlComponent = renderHtmlIntoDocument(htmlElement);
  });

import IntlStore from './stores/IntlStore';
import AttachSubdeckModalStore from './stores/AttachSubdeckModalStore';
import ServiceErrorStore from './stores/ServiceErrorStore';
import PermissionsStore from './stores/PermissionsStore';
import ContentLikeStore from './stores/ContentLikeStore';
import DeckFamilyStore from './stores/DeckFamilyStore';
import MediaStore from './stores/MediaStore';
import UserReviewStore from './stores/UserReviewStore';
import EditRightsStore from './stores/EditRightsStore';
import DeckCollectionStore from './stores/DeckCollectionStore';
import SSOStore from './stores/SSOStore';
import UserRecommendationsStore from './stores/UserRecommendationsStore';
import LoginModalStore from './stores/LoginModalStore';

// create new fluxible instance & register all stores
const app = new Fluxible({
    component: Application,
    stores: [
        RouteStore,
        ApplicationStore,
        DeckPageStore,
        ContentStore,
        ContributorsStore,
        DeckViewStore,
        DeckEditStore,
        SlideViewStore,
        SlideEditStore,
        DataSourceStore,
        TagsStore,
        ActivityFeedStore,
        DeckTreeStore,
        TranslationStore,

'use strict';

import Fluxible from 'fluxible';
import Application from './components/Application';
import RouteStore from './stores/RouteStore';
import fetchrPlugin from 'fluxible-plugin-fetchr';
import ApplicationStore from './stores/ApplicationStore';
import UserStore from './stores/UserStore';
import ProjectsStore from './stores/ProjectsStore';
import PostsStore from './stores/PostsStore';

// create new fluxible instance
let app = new Fluxible({
    component: Application,
    stores: [
		ApplicationStore,
		UserStore,
		ProjectsStore,
		RouteStore,
		PostsStore
	]
});

app.plug(fetchrPlugin({
	xhrPath: '/api',
	xhrTimeout: 15000
}));

export default app;

let app, context;

  // global uncaught exception handler
  window.onerror = (message, file, line, col, error) => {
    dialog.showErrorBox('Unknown Error', `Unknown Error: ${message}`);
  };

  // verify web target
  if (!(document && ('body' in document))) {
    dialog.showErrorBox('Document Error', 'No document body found');
  }

  tapEventInject(); // @TODO remove when >= React 1.0

  // init GUI flux/ible app
  app = new Fluxible({
    component: MainComponent,
    stores: [
      CreateModelStore, FileDetailsStore, FileStore, MetricDataStore,
      MetricStore, ModelDataStore, ModelStore
    ]
  });

  // Plug batchedUpdatePlugin
  app.plug(batchedUpdatePlugin);

  // Plug HTMStudio plugin giving access to HTMStudio clients
  app.plug(HTMStudioPlugin);

  // add context to app
  context = app.createContext({
    configClient: config,

import Fluxible from "fluxible";
import fetchrPlugin from "fluxible-plugin-fetchr";
import { RouteStore } from "fluxible-router";

import routes from "./routes";

import Root from "./containers/Root";

import FeaturedStore from "./stores/FeaturedStore";
import HtmlHeadStore from "./stores/HtmlHeadStore";
import IntlStore from "./stores/IntlStore";
import PhotoStore from "./stores/PhotoStore";

// Create the fluxible app using Root as root component
const app = new Fluxible({ component: Root });

// Make fetchr services respond to /api endpoint
app.plug(fetchrPlugin({ xhrPath: "/api" }));

// Register a fluxible RouteStore
const AppRouteStore = RouteStore.withStaticRoutes(routes);
app.registerStore(AppRouteStore);

// Register app-specific stores
app.registerStore(FeaturedStore);
app.registerStore(HtmlHeadStore);
app.registerStore(IntlStore);
app.registerStore(PhotoStore);

export default app;

// Fluxible app instance

import Fluxible from 'fluxible';

module.exports = new Fluxible({
  component: require('./views/App.jsx'),
  stores: [
    require('./stores/RouteStore'),
    require('./stores/MetaStore')
  ]
});

import Fluxible from 'fluxible';
import Application from 'components/Application';
import routes from 'configs/routes';
import ApplicationStore from 'stores/ApplicationStore';
import SurahsStore from 'stores/SurahsStore';
import UserStore from 'stores/UserStore';
import AyahsStore from 'stores/AyahsStore';
import AudioplayerStore from 'stores/AudioplayerStore';
import React from 'react';

// create new fluxible instance
const app = new Fluxible({
  component: React.createFactory(Application)
});

// register other stores
app.registerStore(ApplicationStore);
app.registerStore(SurahsStore);
app.registerStore(UserStore);
app.registerStore(AudioplayerStore);
app.registerStore(AyahsStore);

export default app;

var React = require('react'),
    css = require('./style.css'),
    Router = require('react-router'),
    getFollowers = require('./../../../actions/getFollowers'),
    FollowersStore = require('./../../../stores/FollowersStore'),
    FluxibleMixin = require('fluxible').FluxibleMixin,
    AlertComponent = require('components/common/alert'),
    LoadingComponent = require('components/common/loading');

var IndexComponent = React.createClass({

    mixins: [FluxibleMixin],

    statics: {
        storeListeners: [FollowersStore],
        // LoadAction is the action that the server needs to run to make
        // this component isomorphic.
        loadAction: getFollowers
    },

    classes: React.addons.classSet({
        'layout-content': true,

var React = require('react'),
    css = require('./style.css'),
    getUser = require('./../../../actions/getUser'),
    UserStore = require('./../../../stores/UserStore'),
    FluxibleMixin = require('fluxible').FluxibleMixin,
    AlertComponent = require('components/common/alert'),
    LoadingComponent = require('components/common/loading');

var UserComponent = React.createClass({

    mixins: [FluxibleMixin],

    statics: {
        storeListeners: [UserStore],
        // LoadAction is the action that the server needs to run to make
        // this component isomorphic.
        loadAction: getUser
    },
    
    classes: React.addons.classSet({
        'layout-content': true,

var React = require('react');
var RouteStore = require('../stores/RouteStore');
var ContactList = require('./ContactList.jsx');
var ContactDetails = require('./ContactDetails.jsx');
var ContactMessages = require('./ContactMessages.jsx');
var StoreMixin = require('fluxible').StoreMixin;

var MainView = React.createClass({
  mixins: [StoreMixin],

  propTypes: {
    context: React.PropTypes.object.isRequired
  },

  render: function() {
    // This is not working, throws a JSX warning message
    // and then a "process" is undefined error :(
    // var Component = this.getStore(RouteStore).getView('MainView');
    // return ;

    var page = this.getStore(RouteStore).getPage();
    var params = this.getStore(RouteStore).getParams();