contextSync.tsx

import { SimpleReactiveStore } from './simple-reactive-store';
import React, { useContext, Context, useEffect } from 'react';

type ContextProps<T> = {
  context: Context<T>;
  path: string;
  simpleStore: SimpleReactiveStore;
};

export function ContextListener<T>({ context, path, simpleStore }: ContextProps<T>) {
  const value = useContext(context);

  useEffect(() => {
    simpleStore.setValue(path, value);
  }, [value, simpleStore, path]);

  return null;
}

export function LinkProvider<T>({
  children,
  path,
  context,
  simpleStore,
  defaultContextValue,
}: React.PropsWithChildren<ContextProps<T> & { defaultContextValue: T }>) {
  const data = simpleStore.useValue(path, defaultContextValue);

  return <context.Provider value={data}>{children}</context.Provider>;
}

wrapWithProviders.tsx

const store = createSimpleReactiveStore();

type CompType = (...args: any) => JSX.Element | null;

export function initProviders(parentNode: HTMLElement | null) {
  if (!parentNode) {
    throw new Error('there is no root for us..');
  }

  const App = () => {
    return (
      <SomeBusinessLogicProvider>
        <ContextListener
          context={someContextContext.SomeContext}
          path="some=path"
          simpleStore={store}
        />
      </SomeBusinessLogicProvider>
    );
  };

  ReactDOM.render(<App />, parentNode);
}

export function wrapComponentWithProviders<T extends CompType>(Comp: T, reduxStore: StoreType) {
  return (props: React.ComponentProps<T>) => (
     <LinkProvider
        context={someContextContext.SomeContext}
        defaultContextValue={someContextContext.defaultValue}
        path="some=path"
        simpleStore={store}
     >
       <Comp {...props} />
    </LinkProvider>

  );
}