Pux

A PureScript FRP interface to React.

Build React UIs as a fold of actions to state via purescript-signal
Type-safe routing
Server-side rendering (isomorphic applications)
Hot-reloading of components

What makes Pux different from Halogen and react-thermite?

Monadic DSL for creating views/virtual DOM
Routing out-of-the-box
Simpler API that resembles the Elm app architecture.
React 0.14+ support

Introduction

Pux is a simple FRP interface for building web applications with React, inspired by the Elm app architecture and Flux. Views are produced from a global state atom, which is updated by a function that folds actions from input. Rendering is handled by React, and PureScript provides functional type-safe application code.

Pux applications consist of:

A type for application state.
A type for actions taken by the user and sent to Input.
A view function, which produces HTML from the current state.
An Update function, which produces a new state from the signal of actions.

Example

data Action = Increment | Decrement

type State = { counter :: Int }

initialState :: State
initialState = { counter: 0 }

update :: forall eff. Update (console :: CONSOLE | eff) State Action
update action state input =
  case action of
    Increment ->
      { state: state { counter = state.counter + 1 }
      , effects: [ do log "increment" ] }
    Decrement ->
      { state: state { counter = state.counter - 1 }
      , effects: [ do log "decrement" ] }

view :: State -> VirtualDOM
view state = div $ do
  p $ text ("Counter: " ++ show state.counter)
  p $ do
    button ! onClick (send Increment) $ text "Increment"
    button ! onClick (send Decrement) $ text "Decrement"

main = renderToDOM "#app" =<< app
  { state: initialState
  , update: update
  , view: view
  , inputs: []
  }

mostalive/purescript-pux

Pux

Introduction

Example