Main

Demo

• DEMO: Todo list
• DEMO: Todo list - complex
• DEMO: Todo list - long
• DEMO: Arkanoid

API

Raxy

import React from "react";
import { Raxy } from "@tetragius/raxy-react";
import instanse from "./store"; // экземпляр IRaxy

export default function App() {
  return (
    <Raxy value={instanse}>
      {...}
    </Raxy>
  );
}

Provider for using the useRaxy hook

useRaxy

type Filter<Store = typeof context, State = any> = (sotre: Store) => State;

useRaxy<Store, State>(filter: Filter<Store, State>, options?): { state: State, store: Store, transaction: Transaction<Store> }

Creates a connection to the repository

• filter - a function that determines when changing which parts of the storage to call the component redrawing
• options - a set of options to optimize work

type Options<State = any> = {
    [P in keyof State]?: {
        ignoreTimeStamp?: boolean;
    };
};
interface IConnectorOptions<T = any> {
    elementRef?: React.RefObj<T>;
}

options

useRaxy(
    (store) => ({
      todos: store.todos, /
      length: store.todos.length 
    }),
    {
      todos: { ignoreTimeStamp: true } // render does not take into account changes in the state of child elements
      elementRef: element // reference to the DOM node to optimize the updateCallback call
    }
  );

When elementRef is specified, it automatically disables checking the storage state change if the specified element is not visible on the page or in any viewport.

The connect method returns an object with fields

• state - reference to the state returned by the filter method
• store - link to store
• transaction - a method for making transactions
• updateState - a method for update state synchronously. It is mainly needed to correctly display the cursor in the input and textarea components when using the value property. See demo for more details. (>= ver: 1.2.12)

raxyReact

interface IRaxyWithHook<S> extends IRaxy<S> {
    useRaxy: Hook<S>;
}
raxyReact: <Store = any>(initStore: Store) => IRaxyWithHook<Store>;

Creates a typed instance of the useRaxy function can be used instead of calling raxy