This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@grampro/fwk-core-global

GBS FWK CORE 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;

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 connect(mapStateToProps)(App);

How to subscribe to the global store

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

Built with 🎈 fun @ GBS