@sb-m/state-local-storage
Overview
@sb-m/state-local-storage
enables Redux state to be persisted in the user's local storage.
Installation
npm install @sb-m/state-local-storage
Usage
The package must be initialized as per below. The select
option determines which data should be
persisted. This should be an array of strings that match the path of the state you want to persist.
Nested data can be determined by a period ('.').
The initialization will return two functions: loadState
and saveState
. loadState
will load the
persisted data. A default state can be passed as a first argument to loadState
which will deep
merge the localstorage state with the default state. loadState
should be used to initialize the
state (for example, using preloadedState
if using Redux). The saveState
function should be
called everytime the state updates which will save the selected data (determined by the select
field in localstorage
import initializeLocalStorage from '@sb-m/state-local-storage'
const { loadState, saveState } = initializeLocalStorage({
localStorageKey: 'localStorageKey', // Optional, defaults to 'state'.
select: [
'cart', // Persist all data in 'cart'
'cart.lineItems', // Only persist 'lineItems' in 'cart', other 'cart' data won't be persisted
],
})
const store = configureStore({
reducer,
preloadedState: loadState(defaultState), // pass optional defaultState. This will deep merge localStorage state with defaultState.
})
store.subscribe(() => saveState(store.getState())) // Save state on store update.
initializeLocalStorage
Initializes the local storage package.
Syntax
import initializeLocalStorage from '@sb-m/state-local-storage'
const { loadState, saveState } = initializeLocalStorage(options)
Options
Parameter | Type | Description |
---|---|---|
localStorageKey |
String | The local storage key for storing the state. Defaults to 'state' |
select |
Array | An array of strings that match the data to be persisted. Nested data can be determined by a period ('.'). |
loadState
Loads the saved state from local storage.
Syntax
const stateLoadedFromLocalstorage = loadState(defaultState)
Arguments
Parameter | Type | Description |
---|---|---|
defaultState |
Object | The default state. The data from localstorage will be deep merged into default state. |
saveState
Saves the state to local storage. Pass the state as the first parameter.
Syntax
saveState(stateToBeSaved)