Own state manager in 80 lines

Reffect

acacode / reffect

The state manager

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

…

View on GitHub

My goal was to create new state manager which will be more simpler than all other alternatives.

Package have three exports - createStore, effect and manageStore and that's all.

with createStore we are creating a store.
effect() create a store's "effect" which will update store.
State of store contains in return value from createStore function.
manageStore is needed for subscribe on store changes.

Sounds simple, take a look how it looks in practice :)

For example we have a library with books.
First of all we should create a store

import { createStore } from "@reffect/core"

const books = createStore({
  all: [],
  selected: null,
})

Now we have a books store. We can use state just using books variable

const filtered = books.all.filter(book => book.genre === "classic")

But we need add some books into the store. Lets do that via effect()

import { effect } from "@reffect/core"

const addBook = effect(books, book => ({
  ...books,
  all: [...books.all, book],
}))

addBook({
  author: "E.B. White",
  name: "Charlotte's Web",
  year: 1952,
  genre: "fantasy",
})

console.log(books.all) // [{ ... Charlotte's Web }]

Also we can combine effects


const setBooks = effect(books, "all")

const addBook = effect(books, book => setBooks([...books.all, book]))

There's no need any reducers or actions. We have only effect which is action and reducer. Also all created effects return void

setBooks([]) // returns undefined

DEV Community