<commit_before># redux-seeds
Grow Your State Tree The Easy Way


[![Build Status](https://travis-ci.org/quinnnned/redux-seeds.svg?branch=master)](https://travis-ci.org/quinnnned/redux-seeds)
[![npm version](https://img.shields.io/npm/v/redux-seeds.svg?style=flat-square)](https://www.npmjs.com/package/redux-seeds)
[![Coverage Status](https://coveralls.io/repos/github/quinnnned/redux-seeds/badge.svg?branch=master)](https://coveralls.io/github/quinnnned/redux-seeds?branch=master)

# State Tree Proposal

Large Redux stores can be tricky to organize, difficult to change, and can
require significant boilerplate for common data structures.

The State Tree Pattern solves all of these issues.

A *State Tree* is a JavaScript object with the following structure:

```` js
const tree = {
    reducer: /* The usual redux reducer */,
    act: { 
        /* 
        * An object of action creators, each of the form:
        *     (options = {}) => action
        */ 
    },
    get: {
        /* 
        * An object of state selectors, each of the form:
        *     (options = {}) => (state = defaultState) => value  
        */ 
    } 
}
````

# Redux Seeds
A seed is a factory function that returns a specific type of state tree.

For example, need a part of your state tree that represents whether or not some
async event is occuring? That's one line of code with the durationTree seed:
````js
/* 
 * What you get for free:
 *
 *  + Reducer:
 *       responds to START_FETCHING_DATA and STOP_FETCHING_DATA action types
 *
 *  + Selector: 
 *     get.isFetchingData()(state)
 *
 *  + Two Action Creators: 
 *      act.startFetchingData(): returns a START_FETCHING_DATA action
 *      act.stopFetchingData(): returns a STOP_FETCHING_DATA action 
 */
const { reducer, act, get } = durationTree('FetchingData');
````

How about if you need to keep track of the state of multiple async requests?
That's only a few more lines of code by wrapping your existing reducer with the
keyedTree seed:

````js
/* This will have the same action creators and selectors as above, except now
 * now their options will be required to include the property 'requestId', to
 * specify a unique branch of the tree: 
 *
 *  get.isFetchingData({ requestId: 42 })(state);
 *  act.startFetchingData({ requestId: 42 });
 *  act.stopFetchingData({ requestId: 42});
 */
const { reducer, act, get } = keyedTree({
    keyName: 'requestId',
    subTree: durationTree('FetchingData');
});
````<commit_msg>Improve README intro; Add basic documentation for valueTree<commit_after># redux-seeds
Grow Your State Tree The Easy Way


[![Build Status](https://travis-ci.org/quinnnned/redux-seeds.svg?branch=master)](https://travis-ci.org/quinnnned/redux-seeds)
[![npm version](https://img.shields.io/npm/v/redux-seeds.svg?style=flat-square)](https://www.npmjs.com/package/redux-seeds)
[![Coverage Status](https://coveralls.io/repos/github/quinnnned/redux-seeds/badge.svg?branch=master)](https://coveralls.io/github/quinnnned/redux-seeds?branch=master)

# State Tree Proposal

Large Redux stores can be tricky to organize, difficult to change, and can
require significant boilerplate for common data structures.

The State Tree Pattern solves all of these issues.

A *State Tree* is a JavaScript object with the following structure:

```` js
const tree = {
    reducer: /* The usual redux reducer */,
    act: { 
        /* 
        * An object of action creators, each of the form:
        *     (options = {}) => action
        */ 
    },
    get: {
        /* 
        * An object of state selectors, each of the form:
        *     (options = {}) => (state = defaultState) => value  
        */ 
    } 
}
````

# Redux Seeds
A seed is a factory function that returns a specific type of state tree.

For example, need a part of your state tree that represents whether or not some
async event is occuring? That's one line of code with the durationTree seed:
````js
/* 
 * What you get for free:
 *
 *  + Reducer:
 *       responds to START_FETCHING_DATA and STOP_FETCHING_DATA action types
 *
 *  + Selector: 
 *     get.isFetchingData()(state)
 *
 *  + Two Action Creators: 
 *      act.startFetchingData(): returns a START_FETCHING_DATA action
 *      act.stopFetchingData(): returns a STOP_FETCHING_DATA action 
 */
const { reducer, act, get } = durationTree('FetchingData');
````

How about if you need to keep track of the state of multiple async requests?
That's only a few more lines of code:

````js
/* 
 * This will have the same action creators and selectors as above, except now
 * now their options will be required to include the property 'requestId', to
 * specify a unique branch of the tree: 
 *
 *  get.isFetchingData({ requestId: 42 })(state);
 *  act.startFetchingData({ requestId: 42 });
 *  act.stopFetchingData({ requestId: 42});
 */
const { reducer, act, get } = keyedTree({
    keyName: 'requestId',
    subTree: durationTree('FetchingData');
});
````

Mix and match to build complex state trees with very little code:
````js
const ( reducer, act, get ) = branchedTree({
    isFetching: keyedTree({
        keyName : 'requestId',
        subTree : durationTree('FetchingData');
    }),
    user: branchedTree({
        isAuthenticated: toggleTree({
            selectorName : 'isUserAuthenticated',
            onActorName  : 'authenticateUser',
            offActorName : 'deAuthenticateUser'  
        }),
        name: valueTree({
            selectorName : 'userName',
            actorName    : 'setUserName'
        })
    }),
    grid3d: keyedTree({
        keyName : 'x',
        subTree : keyedTree({
            keyName : 'y',
            subTree : keyedTree({
                keyName : 'z',
                subTree : valueTree('
                    selectorName : 'gridValue',
                    actorName    : 'setGridValue'
                ')
            })
        })
    })
});
````

# valueTree Seed
````js
const { reducer, get, act } = valueTree({
    defaultState, // optional, default: null
    selectorName  // optional, default: null
    actorName,    // optional, default: null
    valueName,    // optional, default: 'value'
})
````

{'fraction_non_alphanumeric': 0.11885379355258874, 'fraction_numerical': 0.002116574405731032, 'mean_word_length': 2.9555698647778494, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2783860', 'n_tokens_mistral': 1936, 'n_tokens_neox': 1847, 'n_words': 588}