React Redux Persist : How to control when persist data in indexeddb

Question

I'm working on a React/redux application using redux-persist and I have a huge amount of data to persist, I want to be able to persist my Redux Store ONLY when I click on a button, otherwise I don't want to store my data.

This is my store :

import {
  legacy_createStore as createStore,
  combineReducers,
  applyMiddleware
} from "redux";
import { composeWithDevTools } from "redux-devtools-extension/developmentOnly";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist-indexeddb-storage";

import thunk from "redux-thunk";
import dataReducer from "./reducers/dataReducer";

const reducer = combineReducers({
  data: dataReducer
});

const persistConfig = {
  key: "STORE",
  storage: storage("STORE")
};

const persistedReducer = persistReducer(persistConfig, reducer);

const initialState = {};

const middleware = [thunk];

const composeEnhancers = composeWithDevTools({
  features: {
    dispatch: true // dispatch custom actions or action creators
  }
  // serialize: {
  //    options: {
  //        undefined: true,
  //        function: function (fn) {
  //            return fn.toString();
  //        },
  //    },
  // },
});
const store = createStore(
  persistedReducer,
  initialState,
  composeEnhancers(
    applyMiddleware(...middleware)
    // other store enhancers if any
  )
);

const persistor = persistStore(store);
export { persistor };
export default store;

My Index.js look like this :

And I've create a component to show my data :

By doing that : the redux persist data starting from the first render (this is the indexedDb)

What I'm looking for is to set my indexedDB only when I click on the button and trigger the persistData function.

This is my code , So if you have an idea how to achieve this please.

React Redux Persist : How to control when persist data in indexeddb

0 Answers