GBS FWK CORE Version

Latest version :

This package contains the GBS Core with global state manangement.

Installation

npm i @grampro/fwk-core-global

Usage

Wrap the Store Provider around your App component.

import ReactDOM from "react-dom/client";
import App from "./app.tsx";
import "./index.css";
import { StoreProvider } from "@grampro/fwk-core-global";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <StoreProvider>
    <App />
  </StoreProvider>
);

Working with Global State

In order to work with the global state you need to set up your global state first.

You can do this by calling the special function storeService from @grampro/fwk-core-global and the function provided by storeService called setData().

for eg: storeService.setData("unique_name", your_value);

Functional Component Example

import { storeService } from "@grampro/fwk-core-global";
 
function App(){
    useEffect(() => {
        data = somefetchedData; // This will be your initial data.
        storeService.setData("globalData", data); // sets the data to global state aka store.
    }, []);
 
    return(
        <div>Example App</div>
    )
}
 
export default App;

Important: The name of the global state should be unique

The Name giving to the global state should be unique. Adding same name to different data may overwrite your data.

Now you can simply use your global state in various component's by using

storeservice.getData("your_unique_name");

import { storeService } from "@grampro/fwk-core-global";
import { Dropdown } from "gbs-fwk-buildingblock";
import { Textbox } from "gbs-fwk-buildingblock";
 
export default function App(){
    const globalStateData = storeService.getData("globalData"); // This contains your global state.
}
 
// do something with your data.

The Above method will ensure that your state data globally available across the application and thus your other components can also use them.

How to access global state in class component

Using global state in class component is bit different. The global state can be accessed from class components using the method classConnect. Following example depicts the usage of global state in class component.

import { Component } from "react";
import "./App.css";
import { storeService } from "@grampro/fwk-core-global";
import { classConnect } from "@grampro/fwk-core-global";
 
class App extends Component {
  componentDidMount(): void {
    const data = "Some Data";
    storeService.setData("reduxOnClass", data);
  }
  handleReveal = () => {
    const { reduxOnClass }: any = this.props;
    console.log(reduxOnClass);
  };
 
  render() {
    return (
      <div>
        <div>Redux on Class Component</div>
        <button onClick={this.handleReveal}>Reveal Data</button>
      </div>
    );
  }
}
 
const mapStateToProps = (state: any) => ({
  reduxOnClass: state.global.reduxOnClass,
});
 
export default classConnect(mapStateToProps)(App);

How to subscribe to the global store

Unstable

You can subsribe to the changes of the global store by using storeService.getStore() method. This will subscribe to the changes of store and an event will trigger whenever a new chnages happens.

Example:

import React, { useEffect } from "react";
import { storeService } from "@grampro/fwk-core-global";
 
const SubscribeComponent = () => {
  useEffect(() => {
    const subscription = storeService.getStore().subscribe((state) => {
      // Handle store state changes here
      console.log("Store state changed:", state);
    });
 
    return () => {
      // Clean up the subscription when the component is unmounted
      subscription.unsubscribe();
    };
  }, []);
 
  return <div>Subscription Component</div>;
};
 
export default SubscribeComponent;

Why We need this?

This will overcome the issue of prop drilling and a better state manangement and fixes various issues with gbs-fwk-buildingblock (opens in a new tab)

Pdf2images Play Ground