React API

`StoreProvider`

A wrapper component to provide the store to all children components.

import { StoreProvider } from '@nalanda/react';
import { createStore } from '@nalanda/core';
 
 
const store = createStore({
  slices: [counterSlice],
});
 
ReactDOM.render(
  <StoreProvider store={store}>
    <App />
  </StoreProvider>,
  document.getElementById('root')
);

`useStore`

A hook to access the store.

import { useStore } from '@nalanda/react';
 
function MyComponent() {
    const store = useStore();
}

`useTrack()`

A hook to track a slice or a selector.

Signature:

useTrack(slice: Slice): ExposedFieldObject;

Returns:

An object with all the exposed fields of the slice.

Example:

 
import { useTrack } from '@nalanda/react';
 
function MyComponent() {
  const { counter } = useTrack(counterSlice);
 
  return <div>{counter}</div>;
}

This works similar to how effect tracking works.

`useTrackField()`

A hook to track an exposed field of a slice or a selector. This is similar to trackField in effects.

Signature:

useTrackField(slice: Slice, fieldName: string): value

Returns:

The value of the field.

Example:

 
import { useTrack } from '@nalanda/react';
 
function MyComponent() {
  const counter = useTrackField(counterSlice, 'counter');
 
  return <div>{counter}</div>;
}

Cleanup