useRootState

If you are using a StoreProvider and a react context as described here, useRootState accesses the topmost state that you gave to the StoreProvider.

It returns an untyped value, so it is a good idea to have a simple wrapper function around the hook that casts to your root type. You can get a wrapper with getTypedUseRootState and passing it your state.

Usage

import { createReactRecorder, StoreProvider, useMutator, useRootState, useSnap } from 'diagon-react';
import React, { FC, useState } from 'react';

const recorder = createReactRecorder();

type State = { counter: number };

export const Incrementor: FC = React.memo(() => {
    const state = useRootState() as State;

    const counter = useSnap(state, state => state.counter);
    const increment = useMutator(state, state => state.counter++);

    return (
        <div>
            <div>value: {counter}</div>
            <button onClick={increment}>Click me</button>
        </div>
    );
});

export const App: FC = () => {
    const [store] = useState(() => ({ state: { counter: 0 }, recorder }));

    return (
        <StoreProvider {...store}>
            <Incrementor />
        </StoreProvider>
    );
};