0.2.3 ā¢ Published 1 year ago
@youngdo/rx-state v0.2.3
@youngdo/rx-state
State management library by using Rxjs, and inspired by adorable
Getting started
install
npm install @youngdo/rx-state
yarn add @youngdo/rx-state
Example (Simple Counter)
setup
// 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.
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
<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.
<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>
0.3.0-next.2
2 years ago
0.3.0-next.1
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.2.3
1 year ago
0.2.2
2 years ago
0.1.0-alpha.17
2 years ago
0.1.0-alpha.16
2 years ago
0.1.0-alpha.15
2 years ago
0.1.0-alpha.14
2 years ago
0.1.0-alpha.13
2 years ago
0.1.0-alpha.12
2 years ago
0.1.0-alpha.11
2 years ago
0.1.0-alpha.10
2 years ago
0.1.0-alpha.9
2 years ago
0.1.0-alpha.8
2 years ago
0.1.0-alpha.7
2 years ago
0.1.0-alpha.6
2 years ago
0.1.0-alpha.5
2 years ago
0.1.0-alpha.4
2 years ago
0.1.0-alpha.3
2 years ago
0.1.0-alpha.2
2 years ago
0.1.0-alpha.1
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago