title: How to prevent redux-persist from using LocalStorage before it has been allowed by the user?
body: <p>I would like to get the user's consent with a click on a banner button before I use LocalStorage. LocalStorage is used through <code>redux-persist</code>. I'm using <code>redux</code> and <code>redux-persist</code> as follows:</p>
  
  <pre><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;PersistGate loading={null} persistor={persitor} &gt;
        &lt;MyAppRouter /&gt;
      &lt;/PersistGate&gt;
    &lt;/Provider&gt;,
    document.getElementById("root")
  )
  </code></pre>
  
  <p>and <code>store</code> and <code>persistor</code> are coming from </p>
  
  <pre><code>import { createStore } from "redux"
  import { persistStore, persistReducer } from "redux-persist"
  import storage from "redux-persist/lib/storage"
  import { rootReducer } from "../reducers/index"
  
  const persistConfig = {
    key: "root",
    storage,
  }
  
  const persistedReducer = persistReducer(persistConfig, rootReducer)
  
  const store = createStore(persistedReducer)
  const persistor = persistStore(store as any)
  // `as any` is necessary as long as https://github.com/reduxjs/redux/issues/2709 is not fixed
  
  export { store, persistor }
  </code></pre>
  
  <p><code>redux-persist</code> persists the initial state in LocalStorage as soon as the objects are created which is not what I want.</p>
  
  <p>I'd like to use redux in my React components no matter whether the state is persisted or not.</p>
  
  <p>I assume the details of the reducer don't matter as it doesn't have influence on where/how the state is stored.</p>
  
  <p>The information that the user once has expressed consent to use LocalStorage and cookies is stored in a cookie.</p>
  
  <p>How could I start using LocalStorage for persistence only after the user has expressed consent during the first visit or if the cookie is present already? The case that the cookie expired or has been deleted should be covered by the case of the first visit.</p>
  
  <p>In order to minimize discussion I'm looking for a solution which solves the technical problem. The request might be overkill in terms of legal requirements.</p>
  
  <p>Things I tried so far:</p>
  
  <ul>
  <li>Use two store (probably bad practice) which are managed in the state of an <code>App</code> component which wraps <code>Provider</code> as shown in the example. Problem is that the page is re-rendered as soon as the banner button is clicked which is not acceptable.</li>
  <li>Evaluated blacklisting which won't work because it has no impact on the initial persistence of the state.</li>
  </ul>
  
  <hr>
  
  <p>[1] <a href="https://softwareengineering.stackexchange.com/questions/290566/is-localstorage-under-the-cookie-law">https://softwareengineering.stackexchange.com/questions/290566/is-localstorage-under-the-cookie-law</a></p>