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#

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
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.

import { getPersistor } from '@rematch/persist'
import { PersistGate } from 'redux-persist/lib/integration/react'
const persistor = getPersistor()
const Root = () => (
<PersistGate persistor={persistor}>
<App />
</PersistGate>
)