Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by Reatom and Effector

Packages

• @reffect/core - main features (creating stores and effects)
  
• @reffect/react - bindings for React
  
• @reffect/logger - store middleware to log each store update
  
• @reffect/localstore - store middleware to synchronize store with local storage key
  
• @reffect/undoable - store extension which provides undo/redo effects and store history
  
• @reffect/strict - store middleware for making store updates more strict
  

Install

Before at all you need to install the main package:

$ npm i -S @reffect/core
# or using yarn
$ yarn install @reffect/core

If a project is using React you need to install @reffect/react (pack of React hooks which simplify usage with React application)

$ npm i -S @reffect/react

Examples

Simple counter

import { store, effect, manage } from "@reffect/core";

const counter = store({ value: 0 });

const plus = effect(counter, (num: number) => ({ value: counter.value + num }));
const plus10 = effect(counter, () => plus(10));

const unsubscribe = manage(counter).subscribe((update, prevState, currState) =>
  console.log(update, prevState, currState),
);

plus(10);
plus10();

console.log(counter.value); // 20

Async effects

import { store, effect, manage } from "@reffect/core";
import { logger } from "@reffect/logger";

export const usersStore = store("users-store", { list: [] }, [logger]);

export const getUsers = effect(usersStore, async () => {
  const allUsers = await api.getAllUsers();

  return {
    list: allUsers,
  };
});

getUsers(); // Promise<void>

React usage

import React from "react";
import { usersStore, getUsers } from "./above-example.ts";
import { useStore, useEffectState } from "@reffect/react";

export const UsersList = () => {
  const users = useStore(usersStore);
  const { loading, done, error } = useEffectState(getUsers);

  return (
    <ul>
      {!loading && done && users.list.map(user => <li>{user.name}</li>)}
      {loading && "Loading..."}
      {error && "Error!"}
    </ul>
  );
};

How it works