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.x	1.x.x
2.x.x	2.x.x

Install

npm

bash
npm install @rematch/persist

bash
npm install @rematch/persist

Yarn

bash
yarn add @rematch/persist

bash
yarn add @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>
);