Skip to content

yogurt1/reffector

Repository files navigation

Reffector

Стейт-менеджер на базе Rx.js

Вдохновлен Effector

API

Atom

Простая обертка над BehaviorSubject, реализует интерфейс Observable + методы get и set

import { Atom } from 'reffector';

const atom = new Atom(0);

atom.subscribe(value => console.log(value)); // prints 0

atom.set(2); // prints 2

atom.set(4); // prints 4

Store

Обертка над Atom, добавляет возможность подписки на события через on и отписки через off, реализует интерфейс Observable

import { Store } from 'reffector';

const store = new Store<number>(0);

const add = new Subject<number>();
const reset = new Subject<void>();

// listen observables
store.on(add, (state, payload) => state + payload);
store.on(reset, () => 0);

store.subscribe(value => console.log(value)); // prints 0

add.next(4); // prints 4

reset.next(); // prints 0

// unsubscribe add event
// add.complete() same effect
store.off(add);

add.next(5); // no changes to store

Event

Обертка над Subject, добавляет метод emit для генерации события, реализует интерфейс Observable

import { Event } from 'reffector';

const someEvent = new Event<string>();

someEvent.subscribe(value => console.log(value));

someEvent.emit('a'); // prints a
someEvent.emit('b'); // prints b

Все вместе

import { exhaustMap, switchMap } from 'fetch';
import { fromFetch } from 'rxjs/fetch';
import { Atom, Event, Store } from 'reffector';

interface AppState {
  isLoggedIn: boolean;
}

const appStore = new Store<AppState>({
  isLoggedIn: false,
});

const logInEvent = new Event();

// call login every second
const logIn$ = logInEvent.pipe(
  exhaustMap(() => fromFetch('/login').pipe(
    switchMap(response => response.json()),
    tap({
      error: error => {
        // send error to sentry
      },
    }),
  )),
);

appStore.on(logIn$, {
  next: (_, isLoggedIn: boolean) => ({ isLoggedIn }),
  // error and complete also reducers
});

appStore.subscribe(state => {
  console.log('new state:', state);
});

logInEvent.emit();

This project was bootstrapped with TSDX.

Local Development

Below is a list of commands you will probably find useful.

npm start or yarn start

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

Your library will be rebuilt if you make edits.

npm run build or yarn build

Bundles the package to the dist folder. The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

npm test or yarn test

Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published