https://github.com/codewithdpk/react-data-layer

A data layer for react applications to prohibits unnecessary loading of same data by creating cache of data inside session storage. 🚀
https://github.com/codewithdpk/react-data-layer

Last synced: 12 months ago
JSON representation

A data layer for react applications to prohibits unnecessary loading of same data by creating cache of data inside session storage. 🚀

• Host: GitHub
• URL: https://github.com/codewithdpk/react-data-layer
• Owner: codewithdpk
• Created: 2021-06-17T18:38:12.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-06-17T19:39:25.000Z (about 5 years ago)
• Last Synced: 2025-03-18T13:06:22.289Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# react-data-layer

A data layer for reacts applications prohibits unnecessary loading of the same data by creating a cache of data inside session storage. 🚀

## Installation

```bash

npm i react-data-layer-api

```

## Usage

```javascript

import { checkData,fetchData,updateNewData, FLAGS } from 'react-data-layer-api';

const App = () =>{

    const [Products,setProducts] = useState([]);

    useEffect(()=>{

        /* checking if data is already loaded while component

          mounted first time in the app */

        /* pass your key */

        if(checkData("home_data") == FLAGS.DATA_EXIST){

            /* do not need to load data again, fetching data

            from session */

            /* or it will

            return if there is no data DATA_NOT_FOUND flag */

            const products = fetchData("home_data");

            setProducts(products);

        }else{

            /* it will load basically when this

            component will be rederred first

            time in the whole session */

            /* perform request */

            fetch(url,{

                type:'GET/POST',

                header:{`your headers`}

                body:{}

            }).then((response)=>response.json())

            .then((data)=>{

                setProducts(data);

                /* save data to session, will

                return DATA_SAVED flag for confirmation */

                updateNewData(data,"home_data");

            }).catch((err)=>console.log(err));

        }

    },[]);

}

```

You can create multiple layers of different data from other sections in the app. I will be updating more features soon in this like API integration, bulk cache, and all.🔥