Fork me on GitHub

Image Carousel

This image carousel is a very simple React application built using Fluxxor. The source for the example can be found on GitHub.

The entry point of the application is app/app.jsx. The Fluxxor.Flux instance is exported to window.flux so that you can manipulate the application from the standard JavaScript console (e.g. the methods on window.flux.actions).


The system contains two stores:

This separation is perhaps a bit contrived, but shows how you might use multiple stores in a Flux-based React application.


There are four actions that manipulate the stores:

addImage is particularly interesting because the action handler inside CarouselStore utilizes the waitFor mechanism to allow the ImageStore to accept or reject adding the image (based on its file extension and whether the image is already in the carousel).


Note that ImageForm has state outside of the data from the stores—however, it's localized to the form, and isn't part of the larger "application state." When the form is submitted, this local state is sent to the parent component through a property, where it is then sent to the dispatcher via the addImage action.

In this small application, only the top level Application component requires access to the Flux data. However, since Application mixes in Fluxxor.FluxMixin, any descendants of Application with the Fluxxor.FluxMixin would automatically have access to the Fluxxor.Flux instance via this.getFlux().

See a typo? Something still not clear? Report an issue on GitHub.