YARS - Yet Another React Store
This project is a lightfull and powerful No-Flux OOP way to share data between react components.
No Actions, no Dipatcher, no Reducer, no Functionnal development, just a simple class representing a store with data, getters/setters and every related function to fetch and/or modify your data store. Component subscribing alow your components to be rendered when data (or even just a part) has been changed. Your store act as a single source of truth, no data copy inside component props or state.
Setting data in Store act as a React.Component.setState()
function keeping data immutable.
Each time you use setData()
from YARS, it will render all subscribed component by setting an arbitrary state property to properly force the rendering without using forceUpdate().
Install
$ npm i --save yars
Usage
Basic usage
First create a new store a export it:
// stores.js'use strict'; const Store = ;// Or // import Store from 'yars'; // Create an initialized data objectconst initialData = foo: 'bar' // Create an initialized storeconst myStore = initialData; ;
Then in your react component you can subscribe to and drive your store:
// footer.js ;; { // Subscribe to all store data modifications // myStore.subscribe(this); // Subscribe to 'foo' store data modifications myStore; } { myStore; } { const foo = myStore; // Or // const foo = myStore.getData().foo; return <footer className="footer"> <span className="float-left">foo</span> <span className="float-right">© Foo Bar</span> </footer> } ;
Advanced usage
Create a new custom store inherited from YARS:
// stores.js'use strict'; const Store = ;// Or // import Store from 'yars'; ; // HTTP Requests; // A so hype progress bar // Define you initial data in constructor { super username: 'default' ; } // Create a methode to fetch user data { // Start progress bar NProgressstart; // Start http request return axios ; } // Create an initialized storeconst userStore = ; ;
Then in your component you can call your own method and let YARS do the rest for you
// componentA.js ;; { userStore; } { userStore; } { userStore; } { return <button onClick=thishandleFetchUser>Fetch user</button> <span className="result">userStore</span> } ;