This is a small example React application using Fluxxor.
To run, simply open
app/index.html in your web browser—
bundle.js, and the
images/ directory are the only files required to run the application (
bundle.js is build with Webpack). If you want to modify the source and see your updates, run
./start.sh and point your browser to
http://localhost:8089/index.html (you will need to install the
devDependencies from the root of the Fluxxor project first).
Alternatively, check out the running example on the Fluxxor website.
The entry point of the application is
Fluxxor.Flux instance is exported to
The system contains two stores:
ImageStore- Contains the list of images to display in the carousel
CarouselStore- Contains information about the carousel position (which image is being displayed, etc.) and ensures that the user cannot change images while a transition is in progress
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:
prevImage- Moves the carousel to the previous image (modifies
nextImage- Moves the carousel to the next image (modifies
selectImage- Moves the carousel to a specific image (modifies
addImage- Adds an image to the carousel and moves to that image (modifies
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).
Application- The top-level component that maintains state from the stores using
Carousel- The actual image carousel itself; all data is passed as props, and user interaction is propagated back to
ImageForm- A small form for adding images to the carousel; user interaction is propagated back to
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
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.FluxChildMixin would automatically have access to the
Fluxxor.Flux instance via