Demo
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 thefilter
method -
store
- link tostore
-
transaction
- a method for making transactions -
updateState
- a method for update state synchronously. It is mainly needed to correctly display the cursor in theinput
andtextarea
components when using thevalue
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