LocalStorage management wrapper for reduxables like redux-async.
npm i @weavedev/redux-local-storage
We generate API documentation with TypeDoc.
In this example we wrap a ReduxAsync object in a ReduxLocalStorage object to save state changes to localStorage and load existing state from localStorage on init.
import { ReduxAsync } from '@weavedev/redux-async';
import { ReduxLocalStorage } from '@weavedev/redux-local-storage';
export const storedResource = new ReduxLocalStorage(new ReduxAsync( ... ), 'localStorageKey');
// If you are also using our store package (@weavedev/store)
window.storeReducers.storedResource = storedResource.reducer;
window.storeSagas.storedResource = storedResource.saga;
declare global {
interface StoreReducersMap {
storedResource: typeof storedResource.reducer;
}
interface StoreActionsMap {
storedResource: typeof storedResource.actions;
}
}
You can change the saving behaviour by providing an options object.
export const storedResource = new ReduxLocalStorage(
new ReduxAsync( ... ),
'localStorageKey',
reduxLocalStorageOptions,
);
{
/**
* Add a custom transformer between localStorage and the runtime state.
* Usefull for objects that can not be serialized.
*/
transform: {
// Convert saved state to runtime state
read: (s: CustomShape): MyAsyncState => ({ data: s.custom }),
// Convert runtime state to saved state
write: (s: MyAsyncState): CustomShape => ({ custom: s.data }),
},
/**
* By default ReduxLocalStorage saves to localStorage whenever the state changed.
* If you only want to save on specific action types you can provide an array.
*/
triggers: ['MY_ASYNC_ACTION_TRIGGER', 'MY_ASYNC_ACTION_CALLBACK'],
}
Made by Paul Gerarts and Weave