reffect logo
npm
npm bundle size
license
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)
npm npm bundle size@reffect/react- bindings for React
npm npm bundle size@reffect/logger- store middleware to log each store update
npm npm bundle size@reffect/localstore- store middleware to synchronize store with local storage key
npm npm bundle size@reffect/undoable- store extension which provides undo/redo effects and store history
npm npm bundle size@reffect/strict- store middleware for making store updates more strict
npm npm bundle size
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/react
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> ); };
