# @youngdo/rx-state

> State management library by using Rxjs.

Latest version **0.2.3** (published 2023-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @youngdo/rx-state
pnpm add @youngdo/rx-state
yarn add @youngdo/rx-state
bun add @youngdo/rx-state
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2023-02-17 |
| First published | 2021-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Young-do Cho |
| Maintainers | young-do |

## Links

- npm: https://www.npmjs.com/package/@youngdo/rx-state
- Repository: https://github.com/young-do/rx-state
- Homepage: https://github.com/young-do/rx-state#readme
- Issues: https://github.com/young-do/rx-state/issues
- npm.io page: https://npm.io/package/@youngdo/rx-state

## Dependencies (1)

- [rxjs](https://npm.io/package/rxjs.md) ^7.5.7

## Recent versions

- 0.2.3 (latest) — 2023-02-17
- 0.3.0-next.2 — 2022-10-24
- 0.3.0-next.1 — 2022-10-24
- 0.2.2 — 2022-10-10
- 0.2.1 — 2022-08-22
- 0.2.0 — 2022-08-22
- 0.1.0-alpha.17 — 2022-03-03
- 0.1.0-alpha.16 — 2022-03-03
- 0.1.0-alpha.15 — 2022-03-02
- 0.1.0-alpha.14 — 2022-03-02
- 0.1.0-alpha.13 — 2022-03-02
- 0.1.0-alpha.12 — 2022-02-28
- 0.1.0-alpha.11 — 2022-02-28
- 0.1.0-alpha.10 — 2022-02-24
- 0.1.0-alpha.9 — 2022-02-24
- … 13 more at https://npm.io/package/@youngdo/rx-state/versions

## README

# @youngdo/rx-state

State management library by using [Rxjs](https://github.com/ReactiveX/rxjs), and inspired by [adorable](https://github.com/developer-1px/adorable)

## Getting started

### install

```
npm install @youngdo/rx-state
yarn add @youngdo/rx-state
```

## Example (Simple Counter)

### setup

```ts
// action.ts
import { createAction } from '@youngdo/rx-state';

export const INCREASE = createAction<void>();
export const DECREASE = createAction<void>();

// state.ts
import { atom, on } from '@youngdo/rx-state';

export const count$ = atom<number>(0, 'count$', count$ => {
  on(INCREASE).subscribe(() => count$.set(count$.value + 1));
  on(DECREASE).subscribe(() => count$.set(count$.value - 1));

  // // or use 'update'
  // on(INCREASE).subscribe(() => count$.update(prev => prev + 1));
  // on(DECREASE).subscribe(() => count$.update(prev => prev - 1));
});
```

### on React

💡 `useRxState` code at [here](./examples/todo-react/src/hooks/useRxState.ts).

```jsx
import { dispatch } from '@youngdo/rx-state';

import { count$ } from 'state';
import { INCREASE, DECREASE } from 'action';
import { useRxValue } from 'hooks';

function App() {
  const count = useRxValue(count$);

  const increase = () => dispatch(INCREASE);
  const decrease = () => dispatch(DECREASE);

  return (
    <div>
      count: {count}
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}
```

### on Svelte

```html
<script>
  import { dispatch } from '@youngdo/rx-state';

  import { count$ } from 'state';
  import { INCREASE, DECREASE } from 'action';

  const increase = () => dispatch(INCREASE);
  const decrease = () => dispatch(DECREASE);
</script>

<div>
  count: {$count$}
  <button on:click="{increase}">+</button>
  <button on:click="{decrease}">-</button>
</div>
```

### on Vue

💡 `rxToRef` code at [here](./examples/todo-vue/src/utils/index.ts).

```vue
<script>
import { dispatch } from '@youngdo/rx-state';
import { defineComponent } from 'vue';

import { count$ } from 'state';
import { INCREASE, DECREASE } from 'action';
import { rxToRef } from 'utils';

export default defineComponent({
  setup() {
    return {
      count: rxToRef(count$),
    };
  },
  methods: {
    increase() {
      dispatch(INCREASE);
    },
    decrease() {
      dispatch(DECREASE);
    },
  },
});
</script>

<template>
  <div>
    count: {{ count }}
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
  </div>
</template>
```

---
_Source: https://npm.io/package/@youngdo/rx-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._