Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including fluxstream with all npm packages installed. Try it out:

var fluxstream = require("fluxstream")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

fluxstream v2.0.2

A lightweight Flux implementation that controls app state using RxJS and ImmutableJS.


I've been using Redux, and it's pretty great. It achieves what I was trying to accomplish with a better solution. I also see a solid ecosystem growing around it.

If you're using Fluxstream now and run into issues, let me know, I'd be happy to help. Otherwise, I'd recommend giving Redux a try.


A lightweight Flux implementation that controls app state using RxJS and Immutable. It pairs well with React.js but doesn't require it.

2.0 — Complete Overhaul

Everything now revolves around a central core that's easy to pass around your app. Stores define the shape of your application state and how it should mutate when specific actions are called. With centralized, immutable data it's easy to save and restore your application's state at any point in time.


npm install fluxstream


First, you create the core of your application.

import { Core } from 'fluxstream'

const core = new Core()

Then add an action.


Define a store and add it to the core

import { Store } from 'fluxstream'

class CarStore extend Store {
  update () {
    return {
      drive: (core, payload, state) => {
        state.direction = payload
        return state

  car: CarStore

You're all setup. Now the drive action can be used to change the state of the car store.'forward')
> { direction: 'forward' }

Listen for store changes. The result is wrapped in the store's object, making it easy to plug into React.Component.setState(). => console.log(state))'reverse')
> { car: { direction: 'reverse' } }



Once you create the core of your app, all of your interactions with state will happen here. It's easy to pass around your application giving you access to your actions, stores and data.


Initialize one instance of core for your app. Optionally, you can pass in store definitions and action names.

const core = new Core({
  stores: {
    car: CarStore
  actions: ['drive']

Pass in unique names as strings. You need to create actions before stores can use them.

core.createActions('drive', 'stop', 'openTrunk')

Stores need a name and a class definition.

  car: CarStore,
  track: TrackStore

Access all of your actions directly.

// call with a data payload{ direction: 'forward' })

// listen for activity => console.log('Go ' + payload.direction))

Directly access stores. => console.log('Car store: ' + state))

Retrieve current state by store key. Pass in a string for the entire store branch of data, or narrow down by passing an array key path.

core.get(['car', 'engineType'])

Get an Rx.Observable from multiple stores. If any of the stores changes you'll recieve all the current values in the same order you pass them into this function

core.combineStores('car', 'train')
  .subscribe((values) => console.log('Car: ' + values[0], 'Train: ' + values[1]))

This creates an Rx.Observable that only fires when all of the listed stores have updated.

core.waitForStores('car', 'train')
  .subscribe((values) => console.log('Car: ' + values[0], 'Train: ' + values[1]))

This creates an Rx.Observable that only fires when all of the listed actions have updated.

core.waitForActions('drive', 'accelerate')
  .subscribe((payloads) => console.log('Drive: ' + payloads[0], 'Accelerate: ' + payloads[1]))

Returns an object representing current state across all stores.


Restore state across all stores by passing in entire state object.


Stores define how branches of data are shaped and how they change over time. Like a React.Component you define what happens through the lifecycle of an event by overriding class methods. Instead of initializing these stores directly, you'll then pass your class definitions into Core.createStores().


By default returns an empty object, override method to define default state.

class CarStore extends Store {
  getInitialState () {
    return { transmission: 'auto' }

This is the most important part of a store definition — declare how state changes over time. Override update method to return mutators that are associated with action names for keys. Whenever that action is called the returned value will be the new immutable object held by the store.

class CarStore extends Store {
  update () {
    return {
      drive: (core, payload, state) => {
       let car = state
       car.speed = payload
       return car
Store.shouldUpdate(updatingState, currentState)

Override this method to validate state updates. Return false to prevent change.


Sometimes a store needs to work with actions that don't mutate state. It's a great spot to deal with server interaction.

class CarStore extends Store {
  handle () {
    return {
      getRoute: (core, payload, state) => {
        xhr('/routes/0', (route) => core.actions.receiveRoute(route))

Listen for store data changes by passing in a callback. That function then receives the store's updated scoped data, making it easy to pass the results into a component's setState method.

Method used by Core.restore(). Can be used to force data directly into a store.


Access RxJS observable directly.


Generally, you shouldn't need to interact with actions directly. Just give them a name via Core.createActions() and call them via the Core.actions accessor, passing data payloads into the action's function. If you had an action named 'go', you'd call it like so core.actions.go('time'). If you want to receive action events outside of your stores, you can subscribe to them or tap directly into the RxJS observable.


Pass in a callback to handle each action call. The handler should accept one payload argument.


Same as subscribe, except it will unsubscribe from the action's observable stream.


Access the action's RxJS observable stream directly.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free