Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by Reatom and Effector
@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
Before at all you need to install the main package:
$ npm i -S @reffect/core
# or using yarn
$ yarn install @reffect/coreIf 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/reactSimple 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); // 20Async 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>
);
};