xstream-store
A redux-like store module for xstream inspired by redux.
Take the pain out of handling side-effects with the power of observables. Eliminate
the need for use of middleware such as redux-thunk
, and side-effect handlers such
as redux-saga
.
Install
$ npm i xstream-store xstream
Example
View the source in examples/
:
$ node examples/counter
Usage
// my-streamed-counter.js const ADD_TYPE = 'add';const addActionCreator = type: ADD_TYPE value; const RESET_TYPE = 'reset';const resetAction = type: RESET_TYPE; const initialState = value: 0; const counter$Creator = // our counter stream that only receives `counter` state xs // provide initialState in a callback ; const counterEffectsCreator = { // a stream of all actions const action$ = ; // a stream of add actions const addAction$ = ; // a stream of reset actions const reset$ = ; action$ add$ reset$};
// store.js; const add1Action = ; const streamCreatorMap = counter: counterStreamCreator const effectCreators = counterEffectsCreator // fooEffectsCreator; const store = ; // subscribe to your state streamstorestate$; const counterState = storestate$ ; // dispatch actionsstore;// entire state: {counter: { value: 1 }}// counter state: { value: 1 } store;// entire state: {counter: { value: 2 }}// counter state: { value: 2 }
createStore
xstream-store
exports a single function, createStore
. createStore
returns an object containing the initial state of the store, a stream of the current state, and a dispatch function for updating values in the store
const streamCreatorMap = counter: myCounterStreamCeator; const effectCreators = myCounterEffectCreator; const dispatch state$ initialState = ;
Parameter | Type | Required | Description |
---|---|---|---|
streamCreatorMap | obj: { [name]: streamCreator, } | true | An object mapping each streamCreator to a key on the store |
effectCreators | [effectCreator] | false | An array of effect creators. xstream-store will map over each effect creator, passing in a select function for filtering actions within the effect creator, and a dispatch action for dispatching actions from within the effect creator |
state$
The state stream returned by createStore
. Create subscribers to state$
to respond to changes to state:
state$ ;
dispatch
Dispatch actions to update the state of your store:
const incrementAction = type: 'increment'const addActionCreator = type: 'add' value: n; // increment counter value; // add 5 to counter value
initialState
The initial state of the entire store, as defined by the initial state of each stream creator.
Actions
Stream Creator
select
Effects Creator
select
dispatch
Related Libraries
- xstream-store-resource - easily generate streams for asynchronous requests
- react-xstream-store - connect React components to an xstream store
Todo
- add usage
License
MIT