南小北

May 16, 2020

2 min read

Introducing flooks 3.0 - The simplest React Hooks state manager

🍸³

Install

yarn add flooks

Example

// counter.jsconst counter = (now) => ({
count: 0,
add() {
const { count } = now(); // <---- get own model
now({ count: count + 1 }); // <-- set own model
},
});
export default counter;// trigger.jsimport 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.jsximport 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>
</>
);
}

Demo

API

const { a, b } = useModel((now) => data, ['a', 'b']);
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
},
});

Philosophy

GitHub