redux-persist-webextension-storage

A WebExtension Storage storage engine for redux-persist.

Installation

Add the redux-persist-webextension-storage NPM package via NPM or Yarn:

1$ yarn add redux-persist-webextension-storage

Usage

There are separate storage engines for local storage and sync storage. Import the one you need, or both, and pass them as storage engines when configuring your store.

1// configureStore.js
2
3import { combineReducers, createStore } from 'redux'
4import { persistStore, persistReducer } from 'redux-persist'
5import { localStorage, syncStorage } from 'redux-persist-webextension-storage'
6
7import localStorageReducer from './localStorageReducer';
8import syncStorageReducer from './syncStorageReducer';
9
10const localStorageConfig = {
11  key: 'localStorage',
12  storage: localStorage,
13}
14
15const syncStorageConfig = {
16  key: 'syncStorage',
17  storage: syncStorage,
18}
19
20// Persist each of the storage areas under different keys and with different storage engines.
21const rootReducer = combineReducers({
22  localStorage: persistReducer(localStorageConfig, localStorageReducer),
23  syncStorage: persistReducer(syncStorageConfig, syncStorageReducer),
24})
25
26export default () => {
27  const store = createStore(rootReducer)
28  const persistor = persistStore(store)
29  return { store, persistor }
30}

Accessing local/sync storage directly

react-redux prefixes storage keys with "persist:" + config.key. If code needs to access storage directly instead of through Redux, it can construct the key and access the APIs like the following:

1// Example config passed to `persistReducer`
2const key = 'localStorage';
3const localStorageConfig = {
4  key,
5  storage: localStorage,
6}
7
8// …
9
10chrome.storage.local.get([`persist:${key}`], (items) => {
11  const rootParsed = JSON.parse(items['persist:localStorage']);
12  
13  // Keep in mind that each reducer must be parsed separately
14  const someReducer = JSON.parse(parsed.someReducer);
15  
16  // `someReducer` will be the contents of the reducer of that name when last persisted
17});

Further discussion: Accessing storage from content_scripts directly (plain JS) #2