Skip to main content

Persist

Redux-Persist v6 plugin for Rematch. Provides automatic Redux state persistence.

Compatibility#

Install the correct version of persist plugin based on the version of the core Rematch library in your project.

@rematch/core@rematch/persist
1.x.x1.x.x
2.x.x2.x.x

Install#

bash
npm install @rematch/persist
bash
npm install @rematch/persist

persistPlugin(persistConfig, [nestedPersistConfig, persistStoreConfig, callback])#

The persist plugin accepts four arguments - persistConfig, nestedPersistConfig, persistStoreConfig, callback.

  • persistConfig (PersistConfig): object compatible with config argument accepted by redux-persist's persistReducer method - for details refer to their documentation. It is used when creating a persisted root reducer in your store.

  • [nestedPersistConfig] ({ [modelName]: PersistConfig }): whenever you need to use a Nested Persist configuration for some models, provide an object with a mapping from the model name to the redux-persist config for this model.

  • [persistStoreConfig] (PersistorOptions): object compatible with config argument accepted by redux-persist's persistStore method - for details refer to their documentation.

  • [callback] (() => void): a function called after rehydration is finished.

Usage#

Setup the store#

store.js
ts
import persistPlugin from "@rematch/persist";
import { init } from "@rematch/core";
import storage from "redux-persist/lib/storage";
 
const persistConfig = {
key: "root",
storage,
};
 
init({
plugins: [persistPlugin(persistConfig)],
});
store.js
ts
import persistPlugin from "@rematch/persist";
import { init } from "@rematch/core";
import storage from "redux-persist/lib/storage";
 
const persistConfig = {
key: "root",
storage,
};
 
init({
plugins: [persistPlugin(persistConfig)],
});

Persist Gate#

In React you can use a special component provided by redux-persist to display a loading indicator while waiting for data to async load from the storage.

tsx
import { getPersistor } from "@rematch/persist";
import { PersistGate } from "redux-persist/lib/integration/react";
 
const persistor = getPersistor();
 
const Root = () => (
<PersistGate persistor={persistor}>
<div>app</div>
</PersistGate>
);
tsx
import { getPersistor } from "@rematch/persist";
import { PersistGate } from "redux-persist/lib/integration/react";
 
const persistor = getPersistor();
 
const Root = () => (
<PersistGate persistor={persistor}>
<div>app</div>
</PersistGate>
);