v2.1.0

RTK Persist v2.1.0

We're excited to announce the release of rtk-persist v2.1.0! This update introduces powerful new features for customizing how your state is persisted, giving you more control and flexibility for advanced use cases.

This release focuses on improving the API for createPersistedSlice and createPersistedReducer and adding support for custom serialization logic.

✨ Key Features

1. New persistenceOptions API

To streamline configuration, the API for createPersistedSlice and createPersistedReducer has been updated to accept a single persistenceOptions object. This object now cleanly houses all persistence-related settings, such as nestedPath.

Old Usage:

export const counterSlice = createPersistedSlice(
  {
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
      /* ... */
    },
  },
 'features.counter'
);

New Usage:

export const counterSlice = createPersistedSlice(
  {
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
      /* ... */
    },
  },
  {
    nestedPath: 'features.counter'
  }
);

2. Custom Serialization with onPersist and onRehydrate

You now have granular control over the serialization and deserialization process. The new onPersist and onRehydrate options, passed within the persistenceOptions object, allow you to transform your state before it's saved and after it's loaded. This makes it easy to handle non-serializable data like Date objects, Maps, or Sets.

Example:

export const sessionSlice = createPersistedSlice(
  {
    name: 'session',
    initialState,
    reducers: {
      // ...
    },
  },
  {
    onPersist: (state) => ({
      ...state,
      lastLogin: state.lastLogin ? state.lastLogin.toISOString() : null,
    }),
    onRehydrate: (state) => ({
      ...state,
      lastLogin: state.lastLogin ? new Date(state.lastLogin) : null,
    }),
  }
);

💬 Feedback Welcome!

We're excited to see how you use these new customization features. If you encounter any issues or have suggestions, please open an issue on GitHub.

Thank you for your support!

v2.0.0

🚀 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!

v2.0.0-rc.2

Release Changelog

This is a major release that introduces asynchronous store rehydration and first-class support for React Redux. These changes make the library more robust and easier to integrate into modern web applications.

---

💥 BREAKING CHANGES

• Asynchronous Store Creation: The createPersistedStore function is now asynchronous and returns a Promise<PersistedStore>. This is a significant change that ensures the application state is fully rehydrated before the store is made available. You must now await the result of this function or handle the promise accordingly.

  Before:

  const store = createPersistedStore(...);

  After:

  const storePromise = createPersistedStore(...);
  
  // In an async context
  const store = await storePromise;

---

✨ New Features

• React Redux Integration: We've introduced a seamless integration for React applications to handle the new asynchronous store.
  • <PersistedProvider />: A new component that replaces the standard Provider from react-redux. It accepts the store promise and a loader component, ensuring your application only renders after the state has been rehydrated. This prevents UI flicker and guarantees that components always have access to the correct state.
  • usePersistedStore() Hook: A new hook that provides direct access to the rehydrated store instance. This is useful for advanced use cases, such as calling the store's flush() method to manually trigger a save.

---

🛠️ Improvements

• Updated Documentation: The main README.md has been completely overhauled to reflect the new asynchronous API and to provide detailed usage instructions for the React Redux integration.
• Revamped Example Project: The example application has been updated to use the new asynchronous store and the <PersistedProvider />, serving as a clear, working example of the recommended setup.

v2.0.0-rc.1

rtk-persist v2.0.0-rc.1: Release Candidate

This is the first release candidate for rtk-persist v2.0.0. This version is a major update that brings compatibility with the latest versions of Redux Toolkit, along with a modernization of the library's internal development tools.

What's New

• Compatibility with Redux Toolkit v2.1.0+: The primary focus of this release is to ensure full compatibility with the latest features and changes in Redux Toolkit.
• Updated Development Dependencies: We've updated all our internal development tools and dependencies to their latest versions. This includes updates to Babel, ESLint, Prettier, TypeScript, and more, ensuring a modern and stable development environment for the library.

Breaking Changes

• This version of rtk-persist now requires Redux Toolkit v2.1.0 or newer as a peerDependency. Please ensure your project has a compatible version of @reduxjs/toolkit in its dependencies.

How to Install

You can install this release candidate via npm using the @rc tag:

npm install rtk-persist@rc

Feedback Welcome

This is a pre-release version intended for testing. Please try it out in your projects and report any issues you encounter on our GitHub repository. Your feedback is crucial for ensuring a stable v2.0.0 release.

v1.0.0

v1.0.0