Question 215375 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to avoid repeating api call in ReactJS? Any alternative to storing data in local storage?

I am making an api call and setting all the data in my redux state. Now when I refresh the page, all the data in redux gets cleared and my data is lost. So should I add a check on each page whether data is present in state and if not then make an api call again?

const refreshApiCall = async () => {
        if (coinsData === []) {
            const coins = await getListOfCoins();
        }
        const userWallet = await getUserCoins();
        dispatch(setWallet(userWallet));
    }

    useEffect(() => {
        console.log('inside use effect');
        console.log(coinsData);
        refreshApiCall();
    }, []);

This is sort of what I have been doing

Tags:

2

Answers


  1. 0

    you can follow these solutions to solve your problem, if you need more detail, etc you can tell me, good luck.

    problem1:

    • all the data in redux gets cleared and my data is lost

    Solution:

    • you can make your redux reducer persist so that after refreshing the page you have the date

    note

    • With the Redux Persist library, developers can save the Redux store in persistent storage, for example, the local storage. Therefore, even after refreshing the browser, the site state will still be preserved. Redux Persist also includes methods that allow us to customize the state that gets persisted and rehydrated, all with an easily understandable API.
    • for more info, you can check this https://blog.logrocket.com/persist-state-redux-persist-redux-toolkit-react/

    problem2

    • So should I add a check on each page whether data is present in state and if not then make an API call again?

    guide

    • about problem 2 mate I think here in this case is useless but generally is ok this condition
    Login or Signup to reply.
  2. 0

    PROBLEM:
    All the data in redux gets cleared and my data is lost.

    ANSWER:
    In realtime problems the data keeps changing and therefore you should not save the api data. You should only save data that will not change for example (profile data,configuration etc.)

    For this install necessary package "redux persist".

    npm install redux-persist

    Your reducer will be changed with this:

    import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // Use `sessionStorage` for session storage

import rootReducer from './reducers'; // Your root reducer

const persistConfig = {
  key: 'root', // The key used to store the state in storage
  storage, // The storage medium (e.g., Local Storage or Session Storage)
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer, applyMiddleware(/* Add your middleware here */));
const persistor = persistStore(store);

export { store, persistor };

    And Main.js will be changed as :

    import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'; // Import PersistGate
import { store, persistor } from './path/to/store'; // Import your Redux store and persistor

import App from './App'; // Your main application component

const Root = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

export default Root;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search