A dead simple store management for react.
MIT License
A simple state management for React.
$ npm install skshetry/simplestore
npm install --dev
to install dependenciesnpm run test
npm run init
to create a dist
foldernpm run build
npm run clean
to remove dist
folderReact(>=16.0) provides a context API that provides access to data without prop-drilling to the nested components. But, on large projects, to provide access to other part of the app that is not the child, Redux is used.
However for small usages, this may seem overkill.
simpleStore
is basically a global object that can be used on small-to-medium scales. It provides simple API for accessing(get
) and storing data(set
) on the store
. Any changes/updates to the data propagates to the connected
components (connected using connect()
which on later changes will call component's setState
).
Store(key[, callback])
A key has to be passed to the Store
which will be used to set the state on the components later with the same key. At the first, the data is set undefined
.
import Store from 'simplestore';
const fruitStore = Store('fruits');
// can even send a callback during creation
const toDoStore = Store('todos', () => {
initialize_todos();
// something, something here
})
set(data) / get( )
get
returns the copy of the data in the store.
set
is async function that sets/overrides data and then returns new data after propagating new changes to the connected
components. The data
should not be mutated as doing this, the change will not propagate.
fruitStore.get() == undefined;
// true; undefined at first
fruitStore.set([
'apple', 'mango', 'guava', 'litchi'
]);
fruitStore.set([
'apples', 'mangoes'
]).then( data => {
console.log('Fruits updated', data)
});
// ... later
fruitStore.get(); //'apple', 'mango', 'guava', 'litchi'
connect(component[, callback]) / disconnect(component)
connect
should receive this
(the React component itself) that will later be used to propagate the changes. On data set
, setState
of all the components are called with the data in store with the key
used before on initialiation.
disconnect
should also receive this
that will disconnect it from any future changes to the store. It is an async function.
// ... Inside a react component
fruitStore.connect(this);
// can even receive a callback
fruitStore.connect(this, () => {
console.log('I will now receive any',
'changes made to the store.');
});
/// later, if you don't require it
fruitStore.disconnect(this);
/// with then()
fruitStore.disconnect(this).then(
console.log('I won\'t be called now.');
)
connections( )
Provides a list of connections to the store.
fruitStore.connections();
list([key])
Is a static function. If key is passed, this provides the instance having the key. If the store with the key doesn't exist, it will return undefined
. If key isn't passed, this will return all the instances.
Store.list()
Store.list('fruits')
// fruitStore
key
fruitStore.key;
// 'fruits'
MIT