Skip to content

v2.0.0

Choose a tag to compare

View all tags
@tommasoberlose tommasoberlose released this 25 Aug 16:17
· 14 commits to main since this release
v2.0.0
341604c

🚀 RTK-Persist v2.0.0 Released! 🚀

We're thrilled to announce the release of RTK-Persist v2.0.0! This is a major update that introduces powerful new features, making it more flexible and significantly easier to integrate state persistence into your Redux Toolkit applications, especially those built with React.

This release focuses on providing a seamless react-redux integration, deeper state customisation, and improved flexibility for advanced use cases.

💥 Breaking Changes

1. Asynchronous Rehydration

State rehydration from storage is now a fully asynchronous process. This means you can no longer assume the state is available immediately after the store is configured. If you are using this library with React, you should use the new <PersistedProvider /> which ensures your UI only renders after the persisted state has been loaded.

2. Dependencies are now peerDependencies

@reduxjs/toolkit is no longer bundled with rtk-persist. It has been moved to peerDependencies. You must now install it explicitly in your project.

This change reduces bundle size and prevents version conflicts.

npm install @reduxjs/toolkit
# or
yarn add @reduxjs/toolkit

✨ Key Features

1. Seamless React-Redux Integration with PersistedProvider

To prevent your UI from rendering before your state is rehydrated, we've introduced the <PersistedProvider /> component. It seamlessly delays the rendering of your application's UI until the persisted state has been loaded, preventing flickers and ensuring a smooth user experience. You can also provide a custom loading component to show while the store is rehydrating.

How to use:

First, ensure you have react and react-redux installed, as they are now peer dependencies for this integration:

npm install react react-redux
# or
yarn add react react-redux

Then, simply wrap your react-redux <Provider /> with our new <PersistedProvider />.

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistedProvider } from 'rtk-persist/lib/integrations/react-redux';
import { store } from './state/store';
import App from './App';

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

2. Nested Path Persistence

Gain granular control over what you persist. You can now specify nested paths within your slices to save only the data you need, reducing storage footprint and improving performance.

Example:

Let's say your user slice has a shape like { profile: { settings: { theme: 'dark' } }, status: 'idle' }. You can choose to only persist the theme:

// state/store.ts
const persistedStore = createPersistStore({
  slices: [
    {
      name: 'user',
      paths: ['profile.settings.theme'], // Only this nested path will be saved!
    },
  ],
  // ... other settings
});

3. Full createReducer Support

While createSlice is common, rtk-persist now explicitly supports reducers created with Redux Toolkit's createReducer utility. This gives you more flexibility in how you structure your Redux logic without sacrificing persistence capabilities.

💬 Feedback Welcome!

This release marks a significant milestone for rtk-persist, and we can't wait to see what you build with it. If you encounter any issues or have suggestions for new features, please open an issue on GitHub.

Thank you for your support!

Assets 2
Loading