pure-flux

Overview

A Flux library that promotes that (state, action) => state pattern.

This library includes:

• createStore( name, reducerOrSpec, actionsOrSelectors )
• composeStore( name, ...spec )
• dispatch( action )
• getStores( )
• getReducer( )
• getState( )
• promiseAction( type, data )
• replaceState( state )
• subscribe( cb )

For react bindings see react-pure-flux.

Quick start

npm install --save pure-flux

import {
  createStore,
  composeStore,
  dispatch,
  getStores,
  getState,
  promiseAction,
  replaceState,
  subscribe
}
from 'pure-flux'

Polyfills

This library depends on a modern JavaScript runtime. Load a polyfill like in core-js or babel-polyfill to support old browsers.

Install required polyfills with core-js:

require('core-js/fn/promise');
require('core-js/fn/object/assign');
require('core-js/fn/object/freeze');
require('core-js/fn/object/keys');

API

dispatch( action )

Dispatch action, return promise.

var { dispatch } = require( 'pure-flux' )

// With an object
dispatch( { type: 'openPath', '/user/new' } )
.then( action => console.log('Going', action.data) )

// With a Promise
dispatch( Promise.resolve({ type: 'get', mode: 'off the juice' }) )

// With type and data
dispatch( 'loadSettings', { a: 1, b: 2 } )

createStore( name, reducerOrSpec, actionsOrSelectors )

A store responds to actions by returning the next state.

const inc = 'inc'
import {createStore} from 'pure-flux';

// a simple counting store
var store = createStore( "CountStoreWithReducer", (state=0, action) => {
  switch (action.type)
  case inc:
    return state + 1;
  case incN:
    return state + action.data;
  default:
    return state;
}, {
  inc: (state) => dispatch('inc'),
  incN: (state, count) => dispatch('incN', count),
})

// the store includes a reference to dispatch
store.dispatch('inc')

// optionally, define action creators into the store.
store.inc()

Optionally, you may define a store with a specification.

const inc = 'inc'
import { createStore } from 'pure-flux';

// a simple counting store
var countStore = createStore( "CountStoreWithSpec", {
  getInitialState: () => 0,
  inc: (state) => state+1,
  incN: (state, n) => state+n,
})

// object spec makes action creators automatically...
countStore.inc()
countStore.incN(10)

The specification includes the life-cycle method getInitialState which is invoked once when the store is created.

Additional functions are invoked when the action.type matches the key in the spec.

Do not try to mutate the state object. It is frozen.

Store Properties

| name | comment | |---------|------| | name | The name of the store | | dispatch | Access to dispatch function | | dispatchToken | A number used to identity the store | | subscribe | A function to tegister a listener | | getState | A function to access state | | setState | Replace the store's state | | replaceReducer | Replace the store's reducer |

composeStore( name, ...spec )

Compose two or more stores into composite store with a specification.

Object specification

// object spec
composeStores(
  "MyCombinedObjectStore", {
    count: CountStore,
    messages: MessageStore
  }
)

// Returns state as object:
// {
//   count: {CountStore.getState()},
//   messages: {MessageStore.getState()}
// }

Array specification

// list spec
composeStores( "MyCombinedListStore", CountStore, MessageStore )

// Returns state as array:
// [
//   {CountStore.getState()},
//   {MessageStore.getState()}
// ]

getStores( )

Returns an object with the name as key and store as value.

replaceState( state )

Rehydrate the root state.

replaceState({
  'MyCountStore': 1
})

subscribe( listener )

Listen to changes to all stores. This will trigger once each time createStore or dispatch is invoked.

Please note that action will be undefined when createStore is invoked.

var unsubscribe = subscribe( (state, action) => {
  // got change
})

// stop listening
unsubscribe()

getReducer( )

Return the reducer function, use with Redux.

Final thought

If you got this far then I hope you enjoy this library and build something amazing.

If you do please let me know!