use-atom-view

中文文档

Represent the state as an immutable and observable data object by Atom.

• TypeScript friendly
• super small, bundle size only 1.5K, gzip 710B
• minimalistic API

Install

npm i -S use-atom-view

Quick Start

👇🏻 Here's a typical example of a 'counter' and how it fits within the whole application

import React from 'react';
import { Atom, useAtomView } from 'use-atom-view';

// create an Atom, an atom stores the state data, and an observable object.
const counterAtom = Atom.of<number>(1);

function CounterBox() {
  const count = useAtomView(counterAtom);

  // modify or set the atom value, it will notify the component to re-render,
  // the component will get the next value
  const hanldeAdd = () => {
    counterAtom.modify((x) => x + 1);

    // or
    // counterAtom.set(count + 1);
  };

  return (
    <div>
      <button onClick={hanldeAdd}>add counter</button>
      <div>{count}</div>
    </div>
  );
}

Atom

Atom<T> is a data cell that holds a single immutable value, which you can read and write to.

Atom.of

Create an atom

const counter = Atom.of<number>(1);
const motto = Atom.of('too young, too simple');
const chairman = Atom.of<Person>({ name: 'jiang', birthday: '1926-08-17' });

atom.get

read the value in the atom

const counter = Atom.of<number>(1);
const count = counter.get(); // 1

atom.set

swap/reset the value in the atom

const counter = Atom.of<number>(1);
counter.set(2);
counter.get(); // 2

atom.modify

modify the value in the atom by the setter.

const counter = Atom.of<number>(1);
counter.modify((x) => x + 2);
counter.get(); // 3

atom.merge

receive the partial value and merge it to the original value, reset this final value to atom.

const a1 = Atom.of({ a: 1, b: 2 });
a1.merge({ b: 3 });
a1.get(); // { a: 1, b: 3 }

// for the atom of number type, it will fallback to `atom.set`
const counter = Atom.of<number>(1);
counter.merge(2);
counter.get(); // 2

atom.subscribe

You can track changes that happen to an atom's value with subscribe.

const counter = Atom.of<number>(1);

counter.subscibe((currentData, prevData) => {
  console.log('atom changed:', currentData, prevData);
});

counter.set(2); // atom changed:, 2, 1
counter.modify((x) => x + 2); // atom changed: 4, 2

Alterntive

• focal
  use-atom-view inspired form focal

• jotai
  yet another Atom based state management toolkit. jotai maybe more like React, you cannot read or set atom outside the component