react-flux: A binding to React based on the Flux application architecture for GHCJS

[ bsd3, library, web ] [ Propose Tags ]

See the README below.

[Skip to Readme]


Automatic Flags

Build the TODO example application


Build the test client application


Use -f <flag> to enable a flag, or -f -<flag> to disable that flag. More info


Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


  • No Candidates
Versions [RSS] 0.9.0, 0.9.1, 0.9.2, 0.9.3, 0.9.4, 1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.0.4, 1.0.5, 1.0.6, 1.0.7, 1.1.0, 1.1.1, 1.2.0, 1.2.1, 1.2.2, 1.2.3
Change log
Dependencies aeson (>=0.8), base (>=4.8 && <5), bytestring, deepseq, ghcjs-base, mtl (>=2.1), react-flux, template-haskell (>=2.10), text (>=1.2), time (>=1.5), transformers, unordered-containers, web-routes [details]
License BSD-3-Clause
Author John Lenz <>
Maintainer John Lenz <>
Category Web
Home page
Source repo head: hg clone
Uploaded by JohnLenz at 2016-09-05T21:11:18Z
Distributions NixOS:1.2.3
Reverse Dependencies 1 direct, 1 indirect [details]
Executables route-example, test-client, purecss-side-menu, todo-node, todo
Downloads 10154 total (3 in the last 30 days)
Rating 2.5 (votes: 5) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs available [build log]
Last success reported on 2016-11-20 [all 1 reports]

Readme for react-flux-1.2.3

[back to package description]

A GHCJS binding to React based on the Flux design. The flux design pushes state and complicated logic out of the view, allowing the rendering functions and event handlers to be pure Haskell functions. When combined with React's composable components and the one-way flow of data, React, Flux, and GHCJS work very well together.


The haddocks contain the documentation.

Using in your own project

I use stack to build my frontend which uses react-flux. I set up stack and ghcjs using these instructions. Note that react-flux requires GHCJS master (a.k.a. improved base). I keep updated with the latest version of GHCJS and lts. As I write this, I use the following stack.yaml, but as new LTS versions or new GHCJS versions come out I keep updating to them (and probably forget to update this README :)

resolver: lts-6.1
    - .
    - react-flux-(version)

compiler: ghcjs-
compiler-check: match-exact
        sha1: 6d6f307503be9e94e0c96ef1308c7cf224d06be3

Example Applications

The source contains some example applications. To try out the TODO example, clone the repository, set up ghcjs manually as in the previous section, and then execute:

stack build
cd example/todo
firefox todo.html

If you don't have closure installed, you can open todo-dev.html instead of todo.html. For more details on the example applications, see the README.

Test Suite

To run the test suite, first you must build both the example applications and the test-client using ghcjs. (The test-client is a react-flux application which contains code for everything not contained in the todo example.) This is the first stack build below. Then, you must build the test suite, which is a haskell application using hspec-webdriver. This must be built using GHC (not GHCJS), so there is a separate stack.yaml file in the test/spec directory. Also, react-intl must be installed in the test client directory. In summary, run the following commands:

cd test/client
npm install react-intl
cd test/spec
stack build

Next, install selenium-server-standalone (also from npm).

Finally, start selenium-server-standalone and execute the test suite. Make sure you also have closure installed, since the test suite will compress the todo app before testing it. It must be started from the test/spec directory, otherwise it does not find the correct javascript files.

cd test/spec
stack exec react-flux-spec

Other Projects

It differes significantly from the other two react bindings, react-haskell and ghcjs-react. In particular, the major difference is how events are handled. In the Flux design, the state is moved out out of the view and then handlers produce actions which transform the state. Thus there is a one-way flow of data from the store into the view. In contrast, react-haskell and ghcjs-react both have event signals propagaing up the react component tree, transforming state at each node. In particular, react-haskell with its InSig and OutSig have the signals propagate up the tree and optionally transform state at each node and change the type of the signal.