Modify Redux Persist settings after applied to store?

Question

There are any way to modify settings on redux-persist after applied to store? or this can be only defined at bootstrap of application?

Answer 1

I can't think of a way other than recreating the store with the new config. You could create a context to provide a function to change the store config anywhere inside your app. The drawback is that it will reload the whole app.

configureStore

export default (config, initialState) => {
  const persistConfig = {
    key: "root",
    storage,
    ...config
  };

  const persistedReducer = persistReducer(persistConfig, rootReducer);
  let store = createStore(persistedReducer, initialState);
  let persistor = persistStore(store);
  return { store, persistor };
};

App

...
import { StoreContext } from "./StoreContext";
import { initialState } from "./rootReducer";
import configureStore from "./configureStore";
const initialStoreConfig = configureStore({}, initialState);

function App() {
  const [storeConfig, setStoreConfig] = useState(initialStoreConfig);
  const changeStoreConfig = React.useCallback(
    (config) => {
      setStoreConfig(configureStore(config, storeConfig.store.getState()));
    },
    [storeConfig.store]
  );
  return (
    <StoreContext.Provider value={{ changeStoreConfig }}>
      <Provider store={storeConfig.store}>
        <PersistGate
          loading={<div>loading</div>}
          persistor={storeConfig.persistor}
        >
          <div className="App">
            <h1>Hello World</h1>
            <p>A simple toggle:</p>
            <Toggle />
          </div>
        </PersistGate>
      </Provider>
    </StoreContext.Provider>
  );
}

https://codesandbox.io/s/redux-persist-dynamic-config-rmrv9