fluxury
v4.0.2
Published
state management in js
Downloads
28
Readme
fluxury
Overview
State management library; works like redux but with option for many stores, side effects, Promises and other practical things.
Library includes:
- createStore(key, reducerOrSpec, actionsOrSelectors)
- dispatch(action)
- getStores()
- getReducer()
- getState()
- promiseAction(type, data)
- replaceState(state)
- subscribe(cb)
Quick start
npm install --save fluxury
import {
createStore,
dispatch,
getStores,
getState,
promiseAction,
replaceState,
subscribe
} from "fluxury";
// creates a key="A" in the root store, connected to a reducer function.
let storeA = createStore(
"a1",
(state = 0, action) => (action.type === "setA" ? action.data : state)
);
let storeB = createStore(
"b1",
(state = 0, action) => (action.type === "setB" ? action.data : state)
);
// Store with dependencies on state in storeA and storeB.
let storeC = createStore("c1", (state = 0, action, waitFor) => {
// Ensure storeA and storeB reducers run prior to continuing.
waitFor([storeA.dispatchToken, storeB.dispatchToken]);
// Side effect! Get state from other stores.
return storeA.getState() + storeB.getState();
});
subscribe((...args) => console.log("action", ...args));
dispatch("setA", 2);
dispatch("setB", 2);
getState(); // -> { a1: 2, b1: 2, c1: 4 }
Polyfills
This library depends on a modern JavaScript runtime. Load a polyfill like in core-js or babel-polyfill to support old browsers.
Manually 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
createStore( key, reducerOrSpec, actionsOrSelectors )
A store responds to actions by returning the next state.
const inc = 'inc'
import {createStore} from 'fluxury';
// a simple counting store
var store = createStore( "count", (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 "fluxury";
// a simple counting store
var countStore = createStore("count", {
// life-cycle method for initialization.
getInitialState: () => 0,
// handles { type: 'inc' }
inc: state => state + 1,
// handles { type: 'incN' }
incN: (state, n) => state + n
});
// object spec makes action creators automatically...
countStore.inc();
countStore.incN(10);
dispatch( action )
The entry point to effecting state changes in the app is when an action is dispatch.
Dispatch accepts action as object, promise, or type/data; returns promise.
// Import the dispatch function.
var { dispatch } = require( 'fluxury' )
// Dispatch action as object
dispatch( { type: 'openPath', '/user/new' } )
.then( action => console.log('Going', action.data) )
// Dispatch action as promise
dispatch( Promise.resolve({ type: 'get', mode: 'off the juice' }) )
// Dispatch action with type:string and data:object.
dispatch( 'loadSettings', { a: 1, b: 2 } )
Store Properties
Here is a list of store properties that are part of the public API.
| 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 |
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 app's reducer function, use with Redux.