README

React EZ-Store

While Flux delivers a solid architecture for one-way dataflow, I find that it and it's related packages (Reflux, Redux, et. al) are simply too abstract to be practical for many applications. At Motili, we use this very simple package to ease data flow and management. It provides a similar architecture to support one-way data flow, but in a much more useable and practical manner.

In addition, this package provides a native store which integrates directly with SuperAgent, in order to deliver net data following the same model. 70% of our stores are integrated with back-end services in one way or another, and this provides a simple way to fetch and save data.

Follow updates on Twitter @gpasq (https://twitter.com/gpasq);

Example

Using the SuperAgentStore is simple. Following is a service store that provides access to documents in a service:

import {SuperAgentStore} from 'react-ezstore';

export default class DocStore extends SuperAgentStore {
    constructor(state) {
        super(state);
    }

    countDocList() {
        this.setState({busy: true});

        this.get('http://somedocservice/count', (response) => {
            this.setState({
                busy:         false,
                docCount:     response.data ? Number(response.data.count) : 0,
                error:        response.error,
                statusCode:   response.statusCode
            })
        })
    }

    fetchDocList(page, count, sortKey, sortDirection) {
        var filter = {limit: count, skip: page * count}

        if (sortKey) {
            filter.order = sortKey + ' ' + (sortDirection ? sortDirection : "ASC")
        }

        this.setState({busy: true});

        this.get('http://somedocservice/getList?filter=' + JSON.stringify(filter), (response) => {
            this.setState({docList: response.data, busy: false})
        });
    }

    fetchDoc(filter) {
        this.setState({currentQuery: filter, busy: true})
        this.get('https://somedocservice/getDoc?filter=' + JSON.stringify(filter), (response) => {
            this.setState({doc: response.data[0], busy: false})
        });
    }

    saveDocUpdates(updates) {
        this.setState({busy: true})
        this.post('https://somedocservice/saveDoc', updates, (response) => {
            this.setState({doc: response.data[0], busy: false})
        });
    }
}

module.exports.DocStore = DocStore;

Note that SuperAgent data is returned in a response object, structured as follows:

{data, statusCode, sysError, appError}

where data is the reponse data parsed from returned JSON, status code is the HTTP status code, sysError is any HTTP error and app error is any app data returned as an error member in the result data stream.

App Access

You can save and access your stores with text keys using the Stores object.

import {Stores} from 'react-ezstore';

...

Stores.addStore("DocStore", new DocStore());
Stores.addStore("AuthStore", new AuthStore());

...

var docStore = Stores.getStore("DocStore");
var authStore = Stores.getStore("AuthStore");

What's New in 1.0.14

Fix a crash in SuperAgentStore if the called server fails.

What's New in 1.0.13

Added support for passing headers in the SuperAgentStore. Simply pass:

store.setHeaders({
    header1Name: 'header1Value',
    header2Name: 'header2Value'
})

What's New in 1.0.12

Fixed a crash when the incoming event/value of a mutator is null.

What's New in 1.0.11

Provide support for removing store from Stores collection, with the removeStore(name) method.

What's New in 1.0.10

Added test cases for network calls.

What's New in 1.0.9

Added support for HTTP DEL. The function is called del() so as not to cramp the standard JS delete function.

What's New in 1.0.8

Fixed a bug when attemtpting to fire a listener; if the listener is not a function, it will be ignored.
Added a usage document to my blog at http://tech.motili.com/2016/02/12/react-ezstore/

What's New in 1.0.7

I've added mutator support for checkboxes. The default mutator will now set the store value to true if the checkbox is checked and false otherwise.

<input type="checkbox" checked={data.useEmail} onChange={mutator.mutate('useEmail')}/>

What's New in 1.0.6

Release 1.0.6 adds mutators to the Store. A mutator allows you to easily modify the store from a controlled input element, like so:

    render() {
        var addressData = this.addressStore.getState();
        var addressMutator = this.addressStore.getMutator();

        ...
        <label>ADDRESS 1:</label>
        <input value={addressData.address1} onChange={addressMutator.mutate('address1')}></input><br/>
        
        <label>CITY:</label>
        <input value={addressData.city} onChange={addressMutator.mutate('city')}></input><br/>
        ...
    }

Things To Do

I need to find a few minutes to make the source available on github.
The library is simple, but does need a few tests built.

Usage no npm install needed!