<commit_before># mobx-store

[![CircleCI](https://img.shields.io/circleci/project/AriaFallah/mobx-store/master.svg?style=flat-square)](https://circleci.com/gh/AriaFallah/mobx-store)
[![npm](https://img.shields.io/npm/v/mobx-store.svg?style=flat-square)](https://www.npmjs.com/package/mobx-store)
[![Coveralls](https://img.shields.io/coveralls/AriaFallah/mobx-store.svg?style=flat-square)](https://coveralls.io/github/AriaFallah/mobx-store)

A simple observable data store for mobx with time traveling state, a lodash API, and plugin
support for reading from and writing to an external store.

* [Installation](#installation)
* [Why](#why)
* [Usage](#usage)
  * [Reading from and writing to the store](#reading-from-and-writing-to-the-store)
  * [Reading from and writing to an external store](#reading-from-and-writing-to-an-external-store)
  * [Accessing state history](#accessing-state-history)
  * [Using with react](#using-with-react)
* [Credit](#credit)

## Why

MobX provides a way to make your view a function of your data, but leaves it up to you to decide
where you put your data. At first I ended up making multiple stores for my different resources
such as posts and comments, but each of those stores had something in common. I was writing the same
code over and over for querying the data in my stores. Moreover, it was difficult to coordinate
combining the data of the multiple stores.

The idea behind MobX-Store is simple. It's a place to keep all your data organized that provides a
nice way to declaratively query it. Moreover, because it's observable, and because it has a plugin
API for external store, it lets you schedule your own side effects for when your data changes. Finally,
features such as time traveling state can make your code easier to debug especially when MobX adds in
the new action decorators that'll let you know what triggered the state changes.

## Installation

```
npm install --save mobx-store lodash
```

In order to prevent you from importing all of lodash into your frontend app, it's
recommended that you install [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)

```
npm install --save-dev babel-plugin-lodash
```

and add it to your `.babelrc`

```js
{
  "presets": // es2015, stage-whatever
  "plugins": [/* other plugins */, "lodash"]
}
```

this way you can do modular imports, and reduce the size of your bundles on the frontend

```js
import { map, take, sortBy } from 'lodash/fp'
```

## Usage

The store is structured as an object that holds an array for each key. For example, something like

```js
{
  numbers: [],
  letters: []
}
```

To create a store all you need to do is

```js
import mobxstore from 'mobx-store'
const store = mobxstore()
```

and to get access to specific key such as numbers you would just call

```js
store('numbers') // <---- array at numbers. Ready to read or write to it.
```

#### Reading from and writing to the store

mobx-store has a simple [lodash](https://github.com/lodash/lodash) powered API.

* Reading from the store is as simple as passing lodash methods to the store function. In order to
pass methods to the store without actually executing them you can import from `lodash/fp`.

* Writing to the store is done by calling the regular array methods on the store object.


```js
import { filter } from 'lodash/fp'
import mobxstore from 'mobx-store'

const store = mobxstore()

store('numbers') // read current value of store -- []
store('numbers').replace([1, 2, 3]) // write [1, 2, 3] to store
store('numbers', filter((v) => v > 1)) // read [2, 3] from store
```<commit_msg>:memo: mention replace is added by MobX<commit_after># mobx-store

[![CircleCI](https://img.shields.io/circleci/project/AriaFallah/mobx-store/master.svg?style=flat-square)](https://circleci.com/gh/AriaFallah/mobx-store)
[![npm](https://img.shields.io/npm/v/mobx-store.svg?style=flat-square)](https://www.npmjs.com/package/mobx-store)
[![Coveralls](https://img.shields.io/coveralls/AriaFallah/mobx-store.svg?style=flat-square)](https://coveralls.io/github/AriaFallah/mobx-store)

A simple observable data store for mobx with time traveling state, a lodash API, and plugin
support for reading from and writing to an external store.

* [Installation](#installation)
* [Why](#why)
* [Usage](#usage)
  * [Reading from and writing to the store](#reading-from-and-writing-to-the-store)
  * [Reading from and writing to an external store](#reading-from-and-writing-to-an-external-store)
  * [Accessing state history](#accessing-state-history)
  * [Using with react](#using-with-react)
* [Credit](#credit)

## Why

MobX provides a way to make your view a function of your data, but leaves it up to you to decide
where you put your data. At first I ended up making multiple stores for my different resources
such as posts and comments, but each of those stores had something in common. I was writing the same
code over and over for querying the data in my stores. Moreover, it was difficult to coordinate
combining the data of the multiple stores.

The idea behind MobX-Store is simple. It's a place to keep all your data organized that provides a
nice way to declaratively query it. Moreover, because it's observable, and because it has a plugin
API for external store, it lets you schedule your own side effects for when your data changes. Finally,
features such as time traveling state can make your code easier to debug especially when MobX adds in
the new action decorators that'll let you know what triggered the state changes.

## Installation

```
npm install --save mobx-store lodash
```

In order to prevent you from importing all of lodash into your frontend app, it's
recommended that you install [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)

```
npm install --save-dev babel-plugin-lodash
```

and add it to your `.babelrc`

```js
{
  "presets": // es2015, stage-whatever
  "plugins": [/* other plugins */, "lodash"]
}
```

this way you can do modular imports, and reduce the size of your bundles on the frontend

```js
import { map, take, sortBy } from 'lodash/fp'
```

## Usage

The store is structured as an object that holds an array for each key. For example, something like

```js
{
  numbers: [],
  letters: []
}
```

To create a store all you need to do is

```js
import mobxstore from 'mobx-store'
const store = mobxstore()
```

and to get access to specific key such as numbers you would just call

```js
store('numbers') // <---- array at numbers. Ready to read or write to it.
```

#### Reading from and writing to the store

mobx-store has a simple [lodash](https://github.com/lodash/lodash) powered API.

* Reading from the store is as simple as passing lodash methods to the store function. In order to
pass methods to the store without actually executing them you can import from `lodash/fp`.

* Writing to the store is done by calling the regular array methods as well the methods MobX exposes
such as `replace` on the store object.


```js
import { filter } from 'lodash/fp'
import mobxstore from 'mobx-store'

const store = mobxstore()

store('numbers') // read current value of store -- []
store('numbers').replace([1, 2, 3]) // write [1, 2, 3] to store
store('numbers', filter((v) => v > 1)) // read [2, 3] from store
```
{'fraction_non_alphanumeric': 0.11155488224762429, 'fraction_numerical': 0.003580773998071891, 'mean_word_length': 4.26231884057971, 'pattern_counts': {'":': 4, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 16, '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': '391648', 'n_tokens_mistral': 2288, 'n_tokens_neox': 2110, 'n_words': 921}