Add on-demand state retrieval via a ref from global-context-store's <Store />

[pringshia]

Overview

In certain integration use-cases, we could have a container app that needs to handle the submission for an embedded annotation-toolkit app.

On submission, we need to allow the parent or sibling component to get access to the state of the annotation-toolkit application.

Proposal

Our proposal for doing so is via React refs. This will allow on-demand state-retrieval functionality using forwardRef and useImperativeHandle.

Motivating Use Case

We'd like to be able to do something like the below where on an event such as a button click, we can retrieve the current state of the annotation-toolkit app.

function handleSubmit(state) {
  console.log(state)
}

function ParentApp() {
  const appRef = useRef();
  return (
    <div>
      <button onClick={ () => handleSubmit(appRef.current.getState()) } />
      <EmbeddedApp ref={appRef} />
    </div>
  );
}

Design & Considerations