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

``bash
$ npm i --save yars
`

Usage

$3

First create a new store a export it:

`javascript
// stores.js
'use strict';

const Store = require('yars');
// Or
// import Store from 'yars';

// Create an initialized data object
const initialData = {
foo: 'bar'
}

// Create an initialized store
const myStore = new Store(initialData);

export { myStore };
`

Then in your react component you can subscribe to and drive your store:

`javascript
// footer.js

import React, { Component } from 'react';
import { myStore } from 'stores.js';

class Footer extends Component {
componentWillMount() {
// Subscribe to all store data modifications
// myStore.subscribe(this);

// Subscribe to 'foo' store data modifications
myStore.subscribe(this, ['foo']);
}

componentWillUnmount() {
myStore.unsubscribe(this);
}

render() {
const foo = myStore.getData('foo');
// Or
// const foo = myStore.getData().foo;

return (


export default Footer;
`

$3

Create a new custom store inherited from YARS:

`javascript
// stores.js
'use strict';

const Store = require('yars');
// Or
// import Store from 'yars';

import axios from 'axios'; // HTTP Requests
import NProgress from 'nprogress'; // A so hype progress bar

export default class UserStore extends Store {

// Define you initial data in constructor
constructor() {
super({
username: 'default'
});
}

// Create a methode to fetch user data
fetchUser(id) {
// Start progress bar
NProgress.start();

// Start http request
return axios
.get('https://jsonplaceholder.typicode.com/users/'+id)
.then((response) => {
// Set data using inherited setData() method
// This will automaticaly render all subscribed components
this.setData({username: response.data.username});

// Stop progess bar
NProgress.done();
})
.catch((error) => {
// Do something with error
console.error(error);
// Stop progess bar

NProgress.done();
});
}
}

// Create an initialized store
const userStore = new UserStore();

export { userStore };
`

Then in your component you can call your own method and let YARS do the rest for you


`javascript
// componentA.js

import React, { Component } from 'react';
import { userStore } from 'stores.js';

class componentA extends Component {
componentWillMount() {
userStore.subscribe(this, ['username']);
}

componentWillUnmount() {
userStore.unsubscribe(this);
}

handleFetchUser() {
userStore.fetchUser(1);
}

render() {
return (
Fetch user
{userStore.getData('username')}
)
}
}

export default componentA;
``