https://github.com/skshetry/simplestore
A dead simple store management for react.
https://github.com/skshetry/simplestore
react react-state react-store reactjs
Last synced: about 1 month ago
JSON representation
A dead simple store management for react.
- Host: GitHub
- URL: https://github.com/skshetry/simplestore
- Owner: skshetry
- License: mit
- Created: 2018-06-07T02:46:04.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:34:14.000Z (over 2 years ago)
- Last Synced: 2025-03-15T00:15:57.521Z (about 1 month ago)
- Topics: react, react-state, react-store, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.58 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## simpleStore
[](https://travis-ci.org/skshetry/simpleStore)
[](https://coveralls.io/github/skshetry/simpleStore)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fskshetry%2FsimpleStore?ref=badge_shield)
[](https://codeclimate.com/github/skshetry/simpleStore/maintainability)
**A simple state management for React.**
### Install
```
$ npm install skshetry/simplestore
```
### Development
1. `npm install --dev` to install dependencies
2. `npm run test`
3. `npm run init` to create a `dist` folder
4. `npm run build`
5. `npm run clean` to remove `dist` folder
### Why
React(>=16.0) provides a [context API](https://reactjs.org/docs/context.html) 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`](#readingchanging-data). Any changes/updates to the data propagates to the `connected` components ([connected using `connect()`](#connecting-to-the-store) which on later changes will call component's `setState`).
### Creating store
**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`.
```js
import Store from 'simplestore';
const fruitStore = Store('fruits');
// can even send a callback during creation
const toDoStore = Store('todos', () => {
initialize_todos();
// something, something here
})
```
### Reading/Changing data
**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.
```js
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'
```
### Connecting to the Store
**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.
```js
// ... 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.');
)
```
### Getting list of connections to a store
**connections( )**
Provides a list of connections to the store.
```js
fruitStore.connections();
```
### Get other stores
**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.
```js
Store.list()
Store.list('fruits')
// fruitStore
```
### Knowing key of the store for whatever reasons
*key*
```js
fruitStore.key;
// 'fruits'
```
## License
MIT
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fskshetry%2FsimpleStore?ref=badge_large)