- Notifications
You must be signed in to change notification settings - Fork3
A JavaScript library for managing application state
License
bigcommerce/data-store-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A JavaScript library for managing application state.
It helps you to enforce unidirectional data flow in your application, by allowing you to:
- Subscribe to changes to the application state
- Update the state in a serial and immutable fashion
You can install this library usingnpm.
npm install --save @bigcommerce/data-store
This library requiresPromise polyfill if you need to support older browsers, such as IE11.
You may need to create Observables when using this library (please refer to the usage section). We recommend you to userxjs until the time comes when you can create them natively.
import{createDataStore}from'@bigcommerce/data-store';constreducer=(state,action)=>{switch(action.type){case'INCREMENT':return{ ...state,count:state.count+1};case'UPDATE_COUNT':return{ ...state,count:action.payload};default:returnstate;}};constinitialState={count:0};conststore=createDataStore(reducer,initialState);
import{createAction}from'@bigcommerce/data-store';store.dispatch(createAction('INCREMENT'));store.dispatch(createAction('UPDATE_COUNT',10)));
To update the state asynchronously, you need to create an observable that emits actions:
import{Observable}from'rxjs';constaction$=Observable.ajax({url:'/count'}).map(({ response})=>createAction('UPDATE_COUNT',response.count))store.dispatch(action$);
To avoid race condition, actions get dispatched in a series unless you specify a different dispatch queue, i.e.:
store.dispatch(action$);store.dispatch(action$);// The following call does not wait for the previous callsstore.dispatch(action$,{queueId:'foobar'});
Wrap the observable in a closure if you want to access the store elsewhere but don't have direct access to it (i.e.: inside an action creator):
// In an action creatorfunctionupdateAction(){return(store)=>Observable.ajax({url:'/count'}).map(({ response})=>{const{ count}=store.getState();returncreateAction('UPDATE_COUNT',count+response.count);});}
// In a componentstore.dispatch(updateAction());
To do something after an asynchronous dispatch:
const{ state}=awaitstore.dispatch(action$);console.log(state);
To changes and render the latest data:
store.subscribe((state)=>{console.log(state);});
The subscriber will get triggered once when it is first subscribed. And it won't get triggered unless there's a data change.
To filter out irrelevant changes:
// Only trigger the subscriber if `count` changesstore.subscribe((state)=>{console.log(state);},(state)=>state.count);
To transform the return value ofgetState or parameter value ofsubscribe:
conststateTransformer=(state)=>({ ...state,transformed:true});conststore=createDataStore(reducer,initialState,{ stateTransformer});console.log(store.getState());// { count: 0, transformed: true }
To transform dispatched actions:
constactionTransformer=(action)=>({ ...action,transformed:true});conststore=createDataStore(reducer,initialState,{ actionTransformer});console.log(store.dispatch(createAction('INCREMENT')));// { type: 'INCREMENT', transformed: true }
To release:
npm run release
To see other available commands:
npm run
MIT
About
A JavaScript library for managing application state
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.