redux-local-storage

LocalStorage management wrapper for reduxables like redux-async.

Install

npm i @weavedev/redux-local-storage

API documentation

We generate API documentation with TypeDoc.

Usage

Creating

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;
    }
}

Options

You can change the saving behaviour by providing an options object.

export const storedResource = new ReduxLocalStorage(
    new ReduxAsync( ... ),
    'localStorageKey',
    reduxLocalStorageOptions,
);

Options object

{
    /**
     * 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: string): MyAsyncState => ({ data: s }),

        // Convert runtime state to saved state
        write: (s: MyAsyncState): string => 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'],
}

License

GPL-3.0

Made by Paul Gerarts and Weave