Redux Remember saves (persists) and loads (rehydrates) your Redux state from any key-value storage


Documentation | Live Demo | GitHub

---

Features

- Selective persistence - Save and load only the keys you specify
- Multi-platform - Works with React, React Native/Expo or any app that uses Redux
- Supports different storage drivers - localStorage, sessionStorage, AsyncStorage (React Native), or your own custom driver
- Battle-tested - Fully tested with Redux 5.0+ and Redux Toolkit 2.0+
- TypeScript ready - Fully type safe with TypeScript definitions included

> Note: For older versions of Redux or Redux Toolkit, use redux-remember@4.2.2

Installation

``bash
npm install redux-remember


or


pnpm/yarn/bun add redux-remember
`

Quick Start

`ts
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) {
state.text = action.payload;
}
}
});

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

const reducers = {
myStateIsRemembered: myStateIsRemembered.reducer,
myStateIsForgotten: myStateIsForgotten.reducer
};

// Only 'myStateIsRemembered' will be persisted
const rememberedKeys = ['myStateIsRemembered'] satisfies (keyof typeof reducers)[];
const reducer = rememberReducer(reducers);
const store = configureStore({
reducer,
enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(
rememberEnhancer(window.localStorage, rememberedKeys)
)
});
``

For more examples and detailed API documentation, visit the full documentation.

License

MIT