@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)