🍸³

https://github.com/nanxiaobei/flooks

Менеджер состояний для React Hooks, может быть, самый простой.

Состояние автозагрузки ▨ Модули ▨ Управление повторным рендерингом

Установить

yarn add flooks

Пример

// counter.js
const counter = (now) => ({
  count: 0,
  add() {
    const { count } = now(); // <---- get own model
    now({ count: count + 1 }); // <-- set own model
  },
});
export default counter;
// trigger.js
import counter from 'path/to/counter';
const trigger = (now) => ({
  async addLater() {
    const { add } = now(counter); // <-- get other models
    await new Promise((resolve) => setTimeout(resolve, 1000));
    add();
  },
});
export default trigger;
// Demo.jsx
import useModel from 'flooks';
import counter from 'path/to/counter';
import trigger from 'path/to/trigger';
function Demo() {
  const { count, add } = useModel(counter, ['count']); // <-- `deps` re-render control
  const { addLater } = useModel(trigger); // <-- `addLater.loading` auto loading state
  return (
    <>
      <p>{count}</p>
      <button onClick={add}>+</button>
      <button onClick={addLater}>+ ⌛{addLater.loading && '...'}</button>
    </>
  );
}

* Состояние автоматической загрузки: когда someFn является асинхронным, someFn.loading можно использовать в качестве состояния загрузки.

Демо

∷ Живая демонстрация ∷

API

useModel(model, deps)

const { a, b } = useModel((now) => data, ['a', 'b']);

Крючок React, передающий функцию модели, возвращает данные модели.

* Управление повторным рендерингом: deps является необязательным, как и React.useEffect:

  • Если ничего не передать, все обновления в модели вызовут повторный рендеринг.
  • Если передать пустой массив ([]), он никогда не вызовет повторный рендеринг
  • Если передать список зависимостей (['a', 'b']), он вызовет повторный рендеринг только при изменении любой зависимости.

now()

import anotherModel from 'path/to/anotherModel';
const ownModel = (now) => ({
  fn() {
    const { a, b } = now(); // get own model
    const { x, y } = now(anotherModel); // get other models
    now(payload); // set own model
  },
});
  • now() чтобы получить собственную модель
  • now(anotherModel) чтобы получить другие модели
  • now(payload) для обновления собственной модели, payload является объектом

Философия

  • Философия флуков — децентрализация, поэтому рекомендуем связать один компонент и одну модель в одно целое.
  • Не нужно добавлять файл типа store.js или models.js, потому что теперь не нужно раздавать магазин сверху.
  • Модель имеет свое пространство, при вызове now(anotherModel) для получения других моделей все модели могут быть подключены.

Гитхаб

https://github.com/nanxiaobei/flooks