Skip to content
Redux Remember

Quick Start

This guide will help you install and get started with Redux Remember in a web application using Redux Toolkit.

When to Use Redux Remember

Section titled “When to Use Redux Remember”

Use Redux Remember when you need to:

  • Persist user preferences (theme, language, UI state) across sessions
  • Maintain authentication state through page refreshes
  • Save form data to prevent data loss on accidental navigation
  • Cache API responses in localStorage for offline support

Installation

Section titled “Installation”

Install Redux Remember:

Terminal window
npm install --save redux-remember

Basic Setup

Section titled “Basic Setup”

Here’s a minimal example to get you started:

import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { rememberReducer, rememberEnhancer } from 'redux-remember';


const myStateIsRemembered = createSlice({
  name: 'persisted-slice',
  initialState: {
    text: ''
  },
  reducers: {
    setPersistedText(state, action: PayloadAction<string>) {
      state.text = action.payload;
    }
  }
});


const myStateIsForgotten = createSlice({
  name: 'forgotten-slice',
  initialState: {
    text: ''
  },
  reducers: {
    setForgottenText(state, action: PayloadAction<string>) {
      state.text = action.payload;
    }
  }
});


const reducers = {
  myStateIsRemembered: myStateIsRemembered.reducer,
  myStateIsForgotten: myStateIsForgotten.reducer,
  someExtraData: (state = 'bla') => state
};


export const actions = {
  ...myStateIsRemembered.actions,
  ...myStateIsForgotten.actions
};


const rememberedKeys: (keyof typeof reducers)[] = ['myStateIsRemembered']; // 'myStateIsForgotten' will be forgotten, as it's not in this list


const reducer = rememberReducer(reducers);
const store = configureStore({
  reducer,
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(
    rememberEnhancer(
      window.localStorage, // or window.sessionStorage, or your own custom storage driver
      rememberedKeys
    )
  )
});


// Continue using the redux store as usual...

Key Concepts

Section titled “Key Concepts”
  1. rememberReducer: Wraps your reducers to enable state persistence
  2. rememberEnhancer: A Redux enhancer that handles the actual persistence logic
  3. rememberedKeys: An array of keys specifying what should be persisted

Next Steps

Section titled “Next Steps”