<commit_before>[![Dependency Status](https://gemnasium.com/roman01la/f-react-kit.svg)](https://gemnasium.com/roman01la/f-react-kit)
[![Coverage Status](https://coveralls.io/repos/roman01la/f-react-kit/badge.svg)](https://coveralls.io/r/roman01la/f-react-kit)
[![Build Status](https://travis-ci.org/roman01la/f-react-kit.svg?branch=master)](https://travis-ci.org/roman01la/f-react-kit)

# f-react-kit

React application development setup which encourages usage of **global immutable state** and **functional programming style**.
I've been introduced to this concept by awesome devs at [Redradix](http://redradix.com/).

## Usage

```
$ git clone <EMAIL>:roman01la/f-react-kit.git myproject
$ cd myproject
$ npm i
$ npm start
```

## Data flow

![data flow in f-react-kit](flow.png)

## Concepts

### Global immutable state

Concept of a single immutable state comes from [Om](https://github.com/omcljs/om) and has a good explanation in ["React Tips and Best Practices"](http://aeflash.com/2015-02/react-tips-and-best-practices.html) article.

The benefit of this pattern in its simplicity. Root component retrieves an updated atom state every time it's being modified and does re-render of the entire components tree. Every component in the tree receives state as a property passed down from root component.

Thus you don't care about synchronization of changes across application and the whole app can be easily forced to a particular state.

`src/state/atom.es6` represents immutable state and data management operations.

`src/state/initial.es6` is an initial state.

[mori](http://swannodette.github.io/mori/)'s persistent data structures is used here to represent and manipulate atom state.

### Functional programming style

Functional programming is about immutability, purity and side-effect free functions, which brings simplicity to your code.

[Ramda](http://ramdajs.com/) functional lib is used here for manipulating plain JavaScript arrays and objects.<commit_msg>write down data flow in steps<commit_after>[![Dependency Status](https://gemnasium.com/roman01la/f-react-kit.svg)](https://gemnasium.com/roman01la/f-react-kit)
[![Coverage Status](https://coveralls.io/repos/roman01la/f-react-kit/badge.svg)](https://coveralls.io/r/roman01la/f-react-kit)
[![Build Status](https://travis-ci.org/roman01la/f-react-kit.svg?branch=master)](https://travis-ci.org/roman01la/f-react-kit)

# f-react-kit

React application development setup which encourages usage of **global immutable state** and **functional programming style**.
I've been introduced to this concept by awesome devs at [Redradix](http://redradix.com/).

## Usage

```
$ git clone <EMAIL>:roman01la/f-react-kit.git myproject
$ cd myproject
$ npm i
$ npm start
```

## Data flow

![data flow in f-react-kit](flow.png)

- Put initial state into the atom (only on initial render) →
- Pass atom down the components tree as a property →
- When reading data: apply store method to a copy of the atom received as a property →
- When writing: dispatch an action via dispacther →
- Update atom from within the store →
- Repeat ↩

## Concepts

### Global immutable state

Concept of a single immutable state comes from [Om](https://github.com/omcljs/om) and has a good explanation in ["React Tips and Best Practices"](http://aeflash.com/2015-02/react-tips-and-best-practices.html) article.

The benefit of this pattern in its simplicity. Root component retrieves an updated atom state every time it's being modified and does re-render of the entire components tree. Every component in the tree receives state as a property passed down from root component.

Thus you don't care about synchronization of changes across application and the whole app can be easily forced to a particular state.

`src/state/atom.es6` represents immutable state and data management operations.

`src/state/initial.es6` is an initial state.

[mori](http://swannodette.github.io/mori/)'s persistent data structures is used here to represent and manipulate atom state.

### Functional programming style

Functional programming is about immutability, purity and side-effect free functions, which brings simplicity to your code.

[Ramda](http://ramdajs.com/) functional lib is used here for manipulating plain JavaScript arrays and objects.
{'fraction_non_alphanumeric': 0.1081713884336221, 'fraction_numerical': 0.010302036993678295, 'mean_word_length': 4.741935483870968, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, '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': '5763020', 'n_tokens_mistral': 1297, 'n_tokens_neox': 1235, 'n_words': 455}