@todel/react v0.13.1-0

@todel/react

React bindings for Todel

:warning: This library is still experimental.

Translations

This README has been translated by Google. Any help would be greatly appreciated.

This README is also available in other languages:

• Korean (한국어)

Features

• It uses the React Hook API.
• It can be used not only as ‘Store’ but also as ‘Slice’, so it can be used for bottom-up development.

API Overview

createStoreContext

Create a React Context to use the Todel Store.

Here you can create components like StoreProvider that use that Store, and hooks like useDispatch and useSelector.

This does not force your app to use only one global store, This increases the stability of types.

// myStoreContext.ts
import { createStoreContext } from "@todel/react";
import { createStore } from "./myStore";

export const { StoreProvider, useDispatch, useSelector } =
  createStoreContext(createStore);

StoreProvider

A StoreProvider makes the store available to its descendants.

import { createStore } from "./myStore";
import { StoreProvider } from "./myStoreContext";
import MyComponent from "./MyComponent";

const store = createStore();

const App = () => (
  <StoreProvider store={store}>
    <MyComponent />
  </StoreProvider>
);

useDispatch

useDispatch gets the dispatch function from the Todel Store.

import { useDispatch } from "./myStoreContext";
import { increase } from "./actions";

const IncreaseButton = () => {
  const dispatch = useDispatch();

  return <button onClick={() => dispatch(increase())}>Increase</button>;
};

useSelector

useSelector gives you access to RefObjects in store.repo. Each time Slices are updated, their values are updated and multiple RefObjects can be used.

import { useSelector } from "./myStoreContext";

const Summary = () => {
  const total = useSelector(({ userRef, comRef }) => {
    return userRef.value + comRef.value;
  });

  return <div>{total}</div>;
};

useSliceRef

useSliceRef is a React hook that gets the value of the Slice's RefObject. Whenever the Slice state is updated, it automatically gets the value.

These useSliceRef and useSliceModifiers hooks do not require a Store. If you prefer bottom-up development, these two hooks will help.

import { simpleSlice } from "todel/slices";
import { useSliceRef } from "@todel/react";

// Making Slice a global singleton is highly discouraged.
// If possible, inject with props or create a context
const comCountSlice = simpleSlice(1);
const userCountSlice = simpleSlice(1);

const Count = () => {
  const count = useSliceRef(comCountSlice); // 1

  // You can manipulate the value as you like with the selector function
  const double = useSliceRef(comCountSlice, (ref) => ref.value * 2); // 2

  // Multiple slices are also supported.
  const total = useSliceRef(
    [comCountSlice, userCountSlice],
    (comRef, userRef) => comRef.value + userRef.value
  ); // 2

  return <div>{count}, {double}, {total}<div>;
};

useSliceModifiers

useSliceModifiers is a hook to get the Modifiers of a Slice.

It doesn't look at the value of the RefObject, so no additional rendering occurs when the Slice state is updated.

import { simpleSlice } from "todel/slices";
import { useSliceModifiers } from "@todel/react";

const countSlice = simpleSlice(0);

const IncreaseButton = () => {
  const countMod = useSliceModifiers(countSlice);

  return (
    <button onClick={() => countMod.set((num) => num + 1)}>Increase</button>
  );
};