Chudesnov

function renderUserProfile(userId) {
    return fetch('/api/user').then(response => response.json()).then(user => {
        const {
            firstName,
            lastName,
            links
        } = user;

        const result = {

Chudesnov

function myUpload (url, file) {
    return new Observable(subscriber => {
        const request = new XMLHttpRequest();
        request.onload = function(data) {
            subscriber.next(data);
            subscriber.complete();
        }
        request.onerror = function(error) {
            subscriber.error(error);
        }

Chudesnov

// Listen to all errors
this.errorEventListener = event => {
  if (this._isSet) {
    global.removeEventListener('error', this.uncaughtErrorHandler); // remove from the queue in case it was previously added
  }
  global.addEventListener('error', this.uncaughtErrorHandler); // should always get appended the end of the list.
  this._isSet = true; // set a flag to check in later error events.
}
// Report uncaught errors.
this.uncaughtErrorHandler = event => {

Chudesnov

Effector is a brand new reactive state manager. Its ambitious team aims to solve all the problems that existing solutions have. Writing the core of the library from scratch took several attempts across six months, and recently the team released the first stable release.

In this article, I will show why I prefer using Effector for my new projects instead of other state managers. Let's get started with the Effector API.

Basics

Effector uses two concepts you might already be familiar with: store and event.

A store is an object that holds some value. We can create stores with the createStore helper:

import {createStore} from 'effector'

Chudesnov

/**
 * Fetch all urls as fast as possible.
 * Concurrency limits the amount of simultaneous window.fetch calls.
 * Return fetched results in preserved order.
 */
export async function fetchAll<T>(urls: string[], concurrency: number = 3): Promise<T[]> {
  const results: T[] = [];
  const pool: Set<Promise<T>> = new Set();

  let next: () => void = () => {};