🍸³
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