Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by Reatom and Effector

@reffect/react

bindings (hooks) for React

Hooks:

useStore(store) - returns actual store state
useEffectState(effect) - returns effect's state flags ({ pending: boolean, fail: boolean, done: boolean })

How to use

import React from "react";
import { useStore, useEffectState } from "@reffect/react";
import { keyboardsStore, selectKeyboard, getAllKeyboards } from "path/to/store";
// keyboardsStore it is store created via `store()`
// selectKeyboard it is effect created via `effect()`
// getAllKeyboards it is async effect created via `effect()`

const KeyboardsData = () => {
  const { list } = useStore(keyboardsStore);
  const { pending } = useEffectState(getAllKeyboards);

  useEffect(() => {
    getAllKeyboards();
  }, []);

  return (
    <div>
      {pending && <div>Loading</div>}
      {!pending &&
        list.map(keyboard => (
          <div key={keyboard.id} onClick={() => selectKeyboard(keyboard.id)}>
            {keyboard.name}
          </div>
        ))}
    </div>
  );
};