ayanami - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #typescript #llm #rust #nodejs #java #awesome #kubernetes #vue #security #openai

ayanami

(★ 140)

🍭 A better way to react with state

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- dependabot.yml
- .gitignore
- pre-commit
- index.html
- index.tsx
- - ayanami.ts
  - ikari.ts
  - index.ts
  - symbols.ts
  - types.ts
- - index.ts
  - use-ayanami-instance.ts
  - use-ayanami.ts
  - use-subscribe-ayanami-state.ts
- - constants.ts
  - express.ts
  - flag.ts
  - index.ts
  - run.ts
  - ssr-context.tsx
  - ssr-module.ts
  - terminate.ts
- - index.ts
- connect.tsx
- index.ts
- redux-devtools-extension.ts
- - ayanami.spec.ts
  - connect.spec.tsx
  - define-action.spec.ts
  - effect.spec.ts
  - hooks.spec.tsx
  - ikari.spec.ts
  - immer-reducer.spec.ts
  - reducer.spec.ts
  - ssr.spec.tsx
  - utils.spec.ts
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.prettierrc
jest.config.js
LICENSE
package.json
README.md
setup.js
tsconfig.build.json
tsconfig.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<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)