ayanami/README.md

A better way to react with state

<h1 align="center">Ayanami</h1>
<h4 align="center">
  A better way to react with state. Inspired by <a href="https://github.com/LeetCode-OpenSource/redux-epics-decorator">redux-epics-decorator</a>
</h4>

<p align="center">
  <a href="https://github.com/LeetCode-OpenSource/ayanami/blob/master/LICENSE">
    <img height="20" alt="GitHub license" src="https://img.shields.io/badge/license-MIT-blue.svg" />
  </a>
  <a href="#contributing">
    <img height="20" alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
  </a>
  <a href="https://github.com/prettier/prettier">
    <img height="20" alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" />
  </a>
  <a href="https://www.npmjs.com/package/ayanami">
    <img height="20" alt="npm version" src="https://img.shields.io/npm/v/ayanami.svg?style=flat" />
  </a>
  <a href="https://codecov.io/gh/LeetCode-OpenSource/ayanami">
    <img height="20" alt="codecov" src="https://codecov.io/gh/LeetCode-OpenSource/ayanami/branch/master/graph/badge.svg" />
  </a>
  <a href="https://circleci.com/gh/LeetCode-OpenSource/ayanami">
    <img height="20" alt="CircleCI" src="https://badgen.net/circleci/github/LeetCode-OpenSource/ayanami/master" />
  </a>
  <a href="https://bundlephobia.com/result?p=ayanami">
    <img height="20" alt="minzipped size" src="https://badgen.net/bundlephobia/minzip/ayanami" />
  </a>
</p>

## Highlights

- No extra configuration, everything is out of the box
- Define state and actions in a **predictable** and **type-safe** way
- Use **[`RxJS`](https://rxjs-dev.firebaseapp.com)** to create side effects and more
- **Debuggable**: Inspect actions and state changes via [`redux-devtools-extension`](https://github.com/zalmoxisus/redux-devtools-extension)

## Installation

##### Using [yarn](https://yarnpkg.com/en/package/ayanami):

```bash
yarn add ayanami @asuka/di reflect-metadata rxjs immer
```

##### Or via [npm](https://www.npmjs.com/package/ayanami):

```bash
npm install ayanami @asuka/di reflect-metadata rxjs immer
```

## Examples

- [Reducer example](https://codesandbox.io/s/py5o3ojo7x)
- [ImmerReducer example](https://codesandbox.io/s/ayanamiimmerreducerexample-r07kk)
- [Effect example](https://codesandbox.io/s/nnko0rxjv4)
- [Scope example](https://codesandbox.io/s/jlz44wrymw)
- [Interact with other Ayanami example](https://codesandbox.io/s/ly5ol8xrqz)
- [SameScope example](https://codesandbox.io/s/k97lqxwvn5)