Patronum: Effector Operators and Utilities

2.3.0 · active · verified Sun Apr 19

Patronum is a comprehensive utility library designed to extend the core capabilities of the Effector state management framework, providing a rich collection of operators and methods for common reactive programming patterns. It helps Effector developers implement functionality like debouncing, throttling, delays, status tracking for effects, event combination, and store value manipulation with significantly less boilerplate. The current stable version is 2.3.0, and the project exhibits an active development and release cadence, frequently adding new operators and improving existing ones, often with multiple minor and patch releases within a few months. Its key differentiator lies in its deep integration and specialization for the Effector ecosystem, offering purpose-built, type-safe solutions that seamlessly work with Effector's primitive units like Stores, Events, and Effects, fostering modularity and maintainability in complex applications. While it simplifies many common tasks, users must pay attention to its `effector` peer dependency version for compatibility.

Common errors

Warnings

Install

Imports

Quickstart

This example demonstrates how to use `status` to track the state of an Effector effect and `debounce` to rate-limit an Effector event for use cases like search inputs.

import { createEvent, createEffect, createStore } from 'effector';
import { status, debounce, pending, spread } from 'patronum';

// Example 1: Track effect status
const userLoadFx = createEffect<string, { name: string }, Error>();
const $userLoadStatus = status({ effect: userLoadFx });

userLoadFx.use(async (userId) => {
  console.log(`Loading user ${userId}...`);
  await new Promise(resolve => setTimeout(resolve, 500));
  return { name: `User ${userId}` };
});

$userLoadStatus.watch(s => console.log('User load status:', s));
userLoadFx('1'); // Initiates user loading

// Example 2: Debounce an event for search input
const searchInputChanged = createEvent<string>();
const $searchTerm = createStore('');

// Debounce the search input event by 300ms
const debouncedSearch = debounce({
  source: searchInputChanged,
  timeout: 300
});

debouncedSearch.watch(term => console.log('Debounced search term:', term));

searchInputChanged('a');
setTimeout(() => searchInputChanged('ab'), 100);
setTimeout(() => searchInputChanged('abc'), 200); // Only 'abc' will be logged after 300ms from its last call

view raw JSON →