Sharing a new library for RTK state persistence: rtk-persist 👋

[tommasoberlose]

Hey everyone,

I've been working on a little library to help with state persistence in Redux Toolkit and wanted to share it with the community to get your thoughts. It's called rtk-persist.

You can find the repository here: https://github.com/fancypixel/rtk-persist 🚀

Why I built this 🤔

My main goal was to create a simple way to save and rehydrate just specific slices of the Redux store, instead of having to deal with the whole thing. I wanted to build a modern tool that feels like a natural extension of the Redux Toolkit ecosystem.

I tried to focus on a few key ideas:

• Simplicity: A straightforward API that's easy to get started with.
• RTK-Native Feel: It's designed to fit right in with configureStore and your existing slices.
• TypeScript-Friendly: It's written in TypeScript with type safety in mind.

Major Features 🌟

• Effortless Persistence: Persist any Redux Toolkit slice or reducer with minimal configuration.
• Asynchronous Rehydration: Store creation is now asynchronous, ensuring that your app only renders after the state has been fully rehydrated.
• Seamless Integration: Designed as a drop-in replacement for RTK functions. Adding or removing persistence is as simple as changing an import.
• React Redux Integration: Comes with a <PersistedProvider /> and a usePersistedStore hook for easy integration with React applications.
• Flexible API: Choose between a createPersistedSlice utility or a createPersistedReducer builder syntax.
• Nested State Support: Easily persist slices or reducers that are deeply nested within your root state using a simple nestedPath option.
• Storage Agnostic: Works with any storage provider that implements a simple getItem, setItem, and removeItem interface.
• TypeScript Support: Fully typed to ensure a great developer experience with path validation.
• Minimal Footprint: Extremely lightweight with a production size under 15 KB.

How it works 🛠️

The library works by wrapping the specific slice you want to persist.

1. Create the Slice

Replace createSlice with createPersistedSlice. The function accepts the same options.

// features/counter/counterSlice.ts
import { createPersistedSlice } from 'rtk-persist';
import { PayloadAction } from '@reduxjs/toolkit';

export const counterSlice = createPersistedSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

2. Configure the Store

Then you must use configurePersistedStore and provide a storage handler. The store creation is asynchronous and returns a promise that resolves with the rehydrated store.

// app/store.ts
import { configurePersistedStore } from 'rtk-persist';
import { counterSlice } from '../features/counter/counterSlice';
// import { counterReducer } from '../features/counter/counterReducer';

// For web, use localStorage or sessionStorage
const storage = localStorage;

export const store = configurePersistedStore(
  {
    reducer: {
      // IMPORTANT: The key must match the slice's `name` or the reducer's `name`.
      [counterSlice.name]: counterSlice.reducer,
      // [counterReducer.reducerName]: counterReducer,
    },
  },
  'my-app-id', // A unique ID for your application
  storage
);

// Note: RootState and AppDispatch types need to be inferred differently
// due to the asynchronous nature of the store.
// This is typically handled within your React application setup.
export type Store = Awaited<typeof store>;
export type RootState = ReturnType<Store['getState']>;
export type AppDispatch = Store['dispatch'];

Usage with React ⚛️

For React apps, there's a <PersistedProvider /> component that handles waiting for the state to be rehydrated before rendering your UI. This helps prevent any UI flicker on the initial load.

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PersistedProvider } from 'rtk-persist/integrations/react-redux';
import { store } from './state/store'; // This is the promise from configurePersistedStore

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PersistedProvider store={store} loader={<div>Loading...</div>}>
      <App />
    </PersistedProvider>
  </React.StrictMode>,
);

I'd love to hear what you think! 🙏

I'm still actively developing it and would be really grateful for any feedback, suggestions, or ideas you might have. Please let me know what you think!

Thanks so much for checking it out. 😊

[barmanrajdeep]

Isn’t this already supported by the library?

…

On Tue, 26 Aug 2025 at 1:48 PM, Tommaso Berlose ***@***.***> wrote: Hey everyone, I've been working on a little library to help with state persistence in Redux Toolkit and wanted to share it with the community to get your thoughts. It's called rtk-persist. You can find the repository here: https://github.com/fancypixel/rtk-persist 🚀 Why I built this 🤔 My main goal was to create a simple way to save and rehydrate just *specific slices* of the Redux store, instead of having to deal with the whole thing. I wanted to build a modern tool that feels like a natural extension of the Redux Toolkit ecosystem. I tried to focus on a few key ideas: - *Simplicity*: A straightforward API that's easy to get started with. - *RTK-Native Feel*: It's designed to fit right in with configureStore and your existing slices. - *TypeScript-Friendly*: It's written in TypeScript with type safety in mind. Major Features 🌟 - *Effortless Persistence*: Persist any Redux Toolkit slice or reducer with minimal configuration. - *Asynchronous Rehydration*: Store creation is now asynchronous, ensuring that your app only renders after the state has been fully rehydrated. - *Seamless Integration*: Designed as a drop-in replacement for RTK functions. Adding or removing persistence is as simple as changing an import. - *React Redux Integration*: Comes with a <PersistedProvider /> and a usePersistedStore hook for easy integration with React applications. - *Flexible API*: Choose between a createPersistedSlice utility or a createPersistedReducer builder syntax. - *Nested State Support*: Easily persist slices or reducers that are deeply nested within your root state using a simple nestedPath option. - *Storage Agnostic*: Works with any storage provider that implements a simple getItem, setItem, and removeItem interface. - *TypeScript Support*: Fully typed to ensure a great developer experience with path validation. - *Minimal Footprint*: Extremely lightweight with a production size under 15 KB. How it works 🛠️ The library works by wrapping the specific slice you want to persist. 1. Create the Slice Replace createSlice with createPersistedSlice. The function accepts the same options. // features/counter/counterSlice.tsimport { createPersistedSlice } from 'rtk-persist';import { PayloadAction } from ***@***.***/toolkit'; export const counterSlice = createPersistedSlice({ name: 'counter', initialState: { value: 0, }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, },}); export const { increment, decrement } = counterSlice.actions;export default counterSlice.reducer; 2. Configure the Store Then you must use configurePersistedStore and provide a storage handler. The store creation is *asynchronous* and returns a promise that resolves with the rehydrated store. // app/store.tsimport { configurePersistedStore } from 'rtk-persist';import { counterSlice } from '../features/counter/counterSlice';// import { counterReducer } from '../features/counter/counterReducer'; // For web, use localStorage or sessionStorageconst storage = localStorage; export const store = configurePersistedStore( { reducer: { // IMPORTANT: The key must match the slice's `name` or the reducer's `name`. [counterSlice.name]: counterSlice.reducer, // [counterReducer.reducerName]: counterReducer, }, }, 'my-app-id', // A unique ID for your application storage); // Note: RootState and AppDispatch types need to be inferred differently// due to the asynchronous nature of the store.// This is typically handled within your React application setup.export type Store = Awaited<typeof store>;export type RootState = ReturnType<Store['getState']>;export type AppDispatch = Store['dispatch']; Usage with React ⚛️ For React apps, there's a <PersistedProvider /> component that handles waiting for the state to be rehydrated before rendering your UI. This helps prevent any UI flicker on the initial load. // main.tsximport React from 'react';import ReactDOM from 'react-dom/client';import App from './App';import { PersistedProvider } from 'rtk-persist/integrations/react-redux';import { store } from './state/store'; // This is the promise from configurePersistedStore ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <PersistedProvider store={store} loader={<div>Loading...</div>}> <App /> </PersistedProvider> </React.StrictMode>,); I'd love to hear what you think! 🙏 I'm still actively developing it and would be really grateful for any feedback, suggestions, or ideas you might have. Please let me know what you think! Thanks so much for checking it out. 😊 — Reply to this email directly, view it on GitHub <#5059>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUG6PERII25MXNV3ITKDK33PQJ5NAVCNFSM6AAAAACE2FY2M6VHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZYHAYDCOBQGU> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[tommasoberlose]

Hi @barmanrajdeep, Redux Toolkit doesn't handle persistence on its own. The official docs do point to redux-persist, but that library isn't actively maintained anymore, which is what led me to build a modern alternative.

[barmanrajdeep]

Got it! What about this fork https://github.com/mdemichele/redux-persist? this too is not active?

[tommasoberlose]

Good point, I didn't check that fork out, but it still seems inactive since it was created in February.

Anyway, my main goal with rtk-persist wasn't just to continue an existing project, but to take a fresh look at the problem. I wanted to try a slightly different and, in my opinion, simpler approach that’s designed from the ground up to feel like a natural extension of Redux Toolkit.

[barmanrajdeep]

If I want to persist a part of an already created slice?

[tommasoberlose]

Sure, persisting an existing slice is pretty easy and, I hope, straightforward:

Install the lib

yarn add rtk-persist

Replace createSlice

Replace the createSlice function with createPersistedSlice function.

// features/counter/counterSlice.ts
import { createPersistedSlice } from 'rtk-persist';
import { PayloadAction } from '@reduxjs/toolkit';

export const counterSlice = createPersistedSlice({
  name: 'counter',
  ...
});

Replace configureStore

Replace the configureStore function with configurePersistedStore adding as arguments an applicationId used to identify the redux store and a storage implementation (it could be easily be localStorage or AsyncStorage for RN)

// app/store.ts
import { configurePersistedStore } from 'rtk-persist';
import { counterSlice } from '../features/counter/counterSlice';

export const store = configurePersistedStore(
  {
    ...
  },
  'my-app-id', // A unique ID for your application
  localStorage
);

export type Store = Awaited<typeof store>;
export type RootState = ReturnType<Store['getState']>;
export type AppDispatch = Store['dispatch'];

Support Async version of the store

The initialization of the store is now async due to the rehydration process. If you have installed react-redux, you can easily replace Provider with PersistedProvider, adding a loader prop with the React node to render while rehydrating.

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PersistedProvider } from 'rtk-persist';
import { store } from './state/store'; // This is the promise from configurePersistedStore

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PersistedProvider store={store} loader={<div>Loading...</div>}>
      <App />
    </PersistedProvider>
  </React.StrictMode>,
);

[barmanrajdeep]

Okay! I meant to ask about part of slice as in a part of the state in the slice. redux-persist allowed whitelist, exclude list is that supported?

[tommasoberlose]

No problem.
At the moment, there's no option to persist only a part of a slice, but we're planning on adding the chance to add two functions to the createPersistedSlice method to allow the developer to define how a slice is persisted and rehydrated. This will also help with the support for different versions of the stored state if someone wants to implement migrations for example

[tommasoberlose]

@barmanrajdeep I've just published v2.1.0 of the library with support for a onPersist and a onRehydrate function that allows for persisting only a part of the slice.