• Stars
    star
    170
  • Rank 223,357 (Top 5 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated almost 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Realm

A total rip-off of the Elm Architecture, in React.

Realm components are React components, so they are interoperable with non-Realm components. Use Realm for your entire app, or just in specific places.

One way to think of it is as "nested Redux." Each Realm component is its own mini-Redux app, which can be composed of other Redux apps.

import { realm, forward } from 'react-realm'

const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

const init = (initialCount = 0) => initialCount

  // This is a reducer, like Redux
const update = (count, action) => {
  switch (action.type) {
  case INCREMENT:
    return count + 1
  case DECREMENT
    return count - 1
  default
    return count
}

// This is just a stateless functional React component
// Any React component (including a class) is valid
const view = ({ model, dispatch }) =>
  <div>
    Count: {model}
    <button onClick={() => dispatch({ type: INCREMENT })>+</button>
    <button onClick={() => dispatch({ type: DECREMENT })>-</button>
  </div>

// Either compose with other Realm components, or use `start()`
const CounterApp = start({
  model: init(),
  update,
  view
})

ReactDOM.render(<CounterApp />)

See also Realm Redux, which enables the use of Redux extensions with Realm components.

Why you should use this library

  • You think Elm is awesome, but are stuck writing JavaScript for various practical reasons
  • You like functional programming
  • You like Redux, and want access to its huge ecosystem of extensions and resources

Why you shouldn't use this library

  • Because you should use Elm instead
  • Because it's in extreme alpha and not yet ready for public use. I intend to get it ready in time for my React Conf talk on February 23.

Note that while Realm is an implementation of the Elm Architecture, it does not and cannot claim to replicate the entirety of Elm the language.

Docs in progress / non-existent until the library is ready. In the meantime, see this test for an example.

More Repositories

1

recompose

A React utility belt for function components and higher-order components.
JavaScript
14,760
star
2

react-fiber-architecture

A description of React's new core algorithm, React Fiber
11,620
star
3

redux-router

Redux bindings for React Router – keep your router state inside your Redux store
JavaScript
2,303
star
4

flummox

Minimal, isomorphic Flux.
JavaScript
1,689
star
5

redux-rx

RxJS utilities for Redux.
JavaScript
1,007
star
6

react-remarkable

A React component for rendering Markdown with remarkable
JavaScript
450
star
7

redux-batched-updates

Batch React updates that occur as a result of Redux dispatches, to prevent cascading renders. See https://github.com/gaearon/redux/issues/125 for more details.
JavaScript
222
star
8

redux-transducers

Transducer utilities for Redux.
JavaScript
130
star
9

relay-sink

Use Relay to fetch and store data outside of a React component
JavaScript
125
star
10

json-sass

Transforms a JSON stream into scss syntax Sass.
JavaScript
94
star
11

suspense-ssr-demo

JavaScript
93
star
12

flummox-isomorphic-demo

Demo of how to create isomorphic apps using Flummox and react-router
JavaScript
89
star
13

react-rx-component

Yet another RxJS library for React :) Create container components (also known as smart components) by transforming a sequence of props
JavaScript
82
star
14

jquery.sidenotes

Transform Markdown footnotes into superpowered sidenotes
CoffeeScript
73
star
15

realm-redux

JavaScript
58
star
16

change-emitter

Listen for changes. Like an event emitter that only emits a single event type. Really tiny.
JavaScript
57
star
17

the-react-way

An isomorphic React slide deck, about React.
JavaScript
47
star
18

flpunx

Better than all the other Flux libraries combined!
JavaScript
35
star
19

router

An experiment in functional routing for JavaScript applications.
JavaScript
27
star
20

react-suitcss

Build React components that conform to SUIT CSS naming conventions.
JavaScript
24
star
21

flummox-immutable-store

Flummox store with Immutable.js support for serialization and undo/redo
JavaScript
17
star
22

react-object-fit-cover

A React component that mimics object-fit: cover
JavaScript
12
star
23

sassy-namespaces

Namespaces in Sass, minus the headaches.
CSS
10
star
24

redux-basic-blog-example

JavaScript
6
star
25

react-media-mixin

A React mixin to update state in response to media query events.
JavaScript
6
star
26

andrewphilipclark.com

My personal website/blog
CSS
4
star
27

babel-plugin-react-pure-component

JavaScript
3
star
28

react-focuspoint

A React component for 'responsive cropping' with jQuery FocusPoint.
JavaScript
2
star
29

anthem

Minimal REST framework
JavaScript
2
star
30

todos

JavaScript
1
star