Package Exports

@zenstack/react-zen-store

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zenstack/react-zen-store) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Zen Store ☮️

React Zen Store is the React binding for Zen Store. It let's your React component retrieve the latest state from the store.

Installation

yarn add @zenstack/react-zen-store

npm install @zenstack/react-zen-store

Usage

This library exposes some hooks that allow you to bind the Zen Store state value to your components.

`useState`

The useState hook allows your component to stay in sync with the store.

import {createStateStore} from "@zenstack/zen-store";
import {useState} from "@zenstack/react-zen-stack";

const store = createStateStore(13);

const MyComponent = () => {
    const state = useState(store); // assigned 13
    return <p>{state} is my favorite nummber</p>;
}

`useSelector`

The useSelector hook is similar to useState but it provides the return value of the selector execution on the store.

import {createStateStore} from "@zenstack/zen-store";
import {useSelector} from "@zenstack/react-zen-store";

const store = createStateStore(13);
const selector = (x) => x * 2;

const MyComponent = () => {
    const state = useSelector(store, selector); // assigned 26
    return <p>{state} is double my favorite number</p>
}