RFC: initial version of globalState hook

[xilosada]

This PR aims to be the starting point of a broader discussion about providing a global state solution within the VM.

Integration of GlobalStateContext to manage global state within the application using the contextAPI.

Motivation:

As applications grow in complexity, efficiently managing state and data flow becomes crucial. A common pain point in building such complex applications is the cumbersome task of passing props down from the root to deeply nested child components. This not only makes the code harder to maintain but also limits component reusability.

Furthermore, due to the intrinsic architecture of our widgets, creating a context within one widget and leveraging it in another is currently not feasible. This creates a disjoined experience for developers and can lead to unnecessary prop drilling or resorting to less efficient state management solutions.

This PR addresses these challenges by introducing a GlobalStateContext leveraging React's Context API. With this, developers can easily access global state anywhere in the component tree through the useGlobalState hook without the hassle of passing props down multiple levels. Moreover, the new offers flexibility in setup; it can be initialized within a specific widget or can encompass the root VM component in the gate.

Changes:

• Created a new GlobalStateContext to enable centralized state management.
• Export of GlobalStateContext to allow Gateways inject the GlobalState into the root widget.
• Introduced the use of GlobalStateContext to access and manage global state within widgets.
• Extended VM to support the GlobalStateProvider and the new useGlobalState hook.

Examples

Creating the context within a widget:

const ThemeNameDisplay = () => {
const [theme] = useGlobalState("theme");
return <div>Current theme is: {theme}</div>;
};
const LigthThemeButton = () => {
const [_, setTheme] = useGlobalState("theme");
return <button onClick={() => setTheme("light")}>Set Light Theme</button>;
};

const DarkThemeButton = () => {
const [_, setTheme] = useGlobalState("theme");
return <button onClick={() => setTheme("dark")}>Set Dark Theme</button>;
};

const DisplayTheme = () => {
const globalState = useState({ theme: "light" });
return (
 <GlobalStateProvider value={globalState}>
   <ThemeNameDisplay />
   <LigthThemeButton />
   <DarkThemeButton />
 </GlobalStateProvider>
);
};

return (
<div>
 <DisplayTheme />
</div>
);

Screen.Recording.2023-09-20.at.4.07.33.PM.mov

Injecting the context from the gateway:

const ThemeNameDisplay = () => {
  const [theme] = useGlobalState("theme");
  return <div>Current theme is: {theme}</div>;
};
const LigthThemeButton = () => {
  const [_, setTheme] = useGlobalState("theme");
  return <button onClick={() => setTheme("light")}>Set Light Theme</button>;
};

const DarkThemeButton = () => {
  const [_, setTheme] = useGlobalState("theme");
  return <button onClick={() => setTheme("dark")}>Set Dark Theme</button>;
};

const DisplayTheme = () => {
  return (
    <div>
      <ThemeNameDisplay />
      <LigthThemeButton />
      <DarkThemeButton />
    </div>
  );
};

return (
  <div>
    <DisplayTheme />
  </div>
);

Screen.Recording.2023-09-20.at.6.00.56.PM.mov

[evgenykuzyakov]

1. I don't understand this part. Shouldn't we just create a wrapper of React.Context?

2. Why inject [state, setState] here instead of context by name?