Rewrite the library to support multiple cases

Author: tommasoberlose

README.md

@@ -133,34 +133,35 @@ export const store = configurePersistedStore(
       // counter: counterReducer,
     },
   },
+  'applicationId',
   storage
 );
 
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
+type Store = Awaited<typeof store>;
+export type RootState = ReturnType<Store['getState']>;
+export type AppDispatch = Store['dispatch'];
 ```
 
 
 ## 🛠️ API
 
-### `createPersistedSlice(sliceOptions, [filterFunction])`
+### `createPersistedSlice(sliceOptions)`
 
 A wrapper around RTK's `createSlice`.
 * **`sliceOptions`**: The standard `CreateSliceOptions` object.
-* **`filterFunction`** (optional): A function `(state) => partialState` to select which parts of the state to persist.
 
-### `createPersistedReducer(name, initialState, builderCallback, [filterFunction])`
+### `createPersistedReducer(name, initialState, builderCallback)`
 
 A wrapper around RTK's `createReducer`.
 * **`name`**: A unique string to identify this reducer in storage.
 * **`initialState`**: The initial state for the reducer.
 * **`builderCallback`**: A callback that receives a `builder` object to define case reducers.
-* **`filterFunction`** (optional): A function `(state) => partialState` to select which parts of the state to persist.
 
-### `configurePersistedStore(storeOptions, storageHandler)`
+### `configurePersistedStore(storeOptions, applicationId, storageHandler)`
 
 A wrapper around RTK's `configureStore`.
 * **`storeOptions`**: The standard `ConfigureStoreOptions` object.
+* **`applicationId`**: A unique string that identifies the application.
 * **`storageHandler`**: A storage object that implements `getItem`, `setItem`, and `removeItem`.
 
 

example/package.json

@@ -14,7 +14,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
-    "rtk-persist": "../rtk-persist-2.0.0-beta01.tgz"
+    "rtk-persist": "./.."
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

example/src/App.css

@@ -10,9 +10,34 @@
 
 .card {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2em;
-  gap: 2rem;
+  gap: 1rem;
+  border-radius: 12px;
+  margin-bottom: 2rem;
+  background-color: #efefef;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.status-bar {
+  border-radius: 8px;
+  padding: 0.5rem 1.5rem;
+  margin-bottom: 2rem;
+  background-color: #efefef;
+  color: #222222;
+}
+
+.status-bar p {
+  margin: 0.5rem 0;
+}
+
+.status-bar strong {
+  color: #222222;
+  font-weight: 600;
 }

example/src/App.tsx

@@ -1,29 +1,66 @@
-import './App.css'
-import { decrement, increment } from './state/counter/reducer'
-import { useAppDispatch, useAppSelector } from './state/hooks'
+import './App.css';
+import { counterSlice } from './state/counter/slice';
+import { useAppDispatch, useAppSelector } from './state/hooks';
+import { setPaused } from './state/status/slice';
+import { store as storePromise } from './state/store';
 
 
 function App() {
-  // The `state` arg is correctly typed as `RootState` already
-  const count = useAppSelector((state) => state.counter.value)
-  const dispatch = useAppDispatch()
+  const count = useAppSelector((state) => state.counter.value);
+  const { isPaused } = useAppSelector((state) => state.status);
+  const dispatch = useAppDispatch();
+
+  const handlePause = async () => {
+    const store = await storePromise;
+    store.pausePersist();
+    dispatch(setPaused(true));
+  };
+
+  const handleResume = async () => {
+    const store = await storePromise;
+    store.resumePersist();
+    dispatch(setPaused(false));
+  };
+
+  const handleClear = async () => {
+    const store = await storePromise;
+    await store.clearPersistedState();
+    // Reload to show the state has been reset from storage.
+    window.location.reload();
+  };
 
   return (
     <>
-      <h1>count is {count}</h1>
+      <h1>rtk-persist Example</h1>
+      <div className="status-bar">
+        <p>Persistence Status: <strong>{isPaused ? 'Paused' : 'Active'}</strong></p>
+      </div>
+
+      <div className="card">
+        <h2>Counter Value: {count}</h2>
+        <div className='button-group'>
+          <button onClick={() => dispatch(counterSlice.actions.decrement())}>
+            -
+          </button>
+          <button onClick={() => dispatch(counterSlice.actions.increment())}>
+            +
+          </button>
+        </div>
+      </div>
+
       <div className="card">
-        {/* <button onClick={() => dispatch(counterSlice.actions.decrement())}>
-          -
-        </button>
-        <button onClick={() => dispatch(counterSlice.actions.increment())}>
-          +
-        </button> */}
-        <button onClick={() => dispatch(decrement(1))}>
-          -
-        </button>
-        <button onClick={() => dispatch(increment(1))}>
-          +
-        </button>
+        <h2>Persistence Controls</h2>
+        <div className='button-group'>
+          <button onClick={handlePause} disabled={isPaused}>
+            Pause
+          </button>
+          <button onClick={handleResume} disabled={!isPaused}>
+            Resume
+          </button>
+          <button onClick={handleClear} style={{ backgroundColor: '#c0392b' }}>
+            Clear and Reload
+          </button>
+        </div>
       </div>
     </>
   )

example/src/main.tsx

@@ -3,12 +3,26 @@ import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import App from './App.tsx'
 import './index.css'
-import { store } from './state/store.ts'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
-  </StrictMode>,
-)
+import { store as storePromise } from './state/store.ts'
+
+// Get the root element from the DOM.
+const rootElement = document.getElementById('root')!;
+const root = createRoot(rootElement);
+
+// Create an async function to initialize and render the app.
+const startApp = async () => {
+  // Await the store promise to ensure the store is created and rehydrated.
+  const store = await storePromise;
+
+  // Once the store is ready, render the application.
+  root.render(
+    <StrictMode>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </StrictMode>
+  );
+};
+
+// Call the async function to start the application.
+startApp();

example/src/state/counter/reducer.ts

@@ -5,7 +5,7 @@ export const increment = createAction<number>('increment');
 export const decrement = createAction<number>('decrement');
 
 export const reducer = createPersistedReducer(
-  'counter', // A unique name for the reducer
+  'counterR', // A unique name for the reducer
   { value: 0 }, // Initial state
   (builder) => {
     builder

example/src/state/status/slice.ts

@@ -0,0 +1,23 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+interface StatusState {
+  isPaused: boolean;
+}
+
+const initialState: StatusState = {
+  isPaused: false,
+};
+
+export const statusSlice = createSlice({
+  name: 'status',
+  initialState,
+  reducers: {
+    setPaused: (state, action: PayloadAction<boolean>) => {
+      state.isPaused = action.payload;
+    },
+  },
+});
+
+export const { setPaused } = statusSlice.actions;
+
+export default statusSlice.reducer;

example/src/state/store.ts

@@ -1,14 +1,16 @@
-import { configurePersistedStore } from 'rtk-persist'
-// import { counterSlice } from './counter/slice'
-import { reducer } from './counter/reducer'
-
+import { configurePersistedStore } from 'rtk-persist';
+import { counterSlice } from './counter/slice';
+import { statusSlice } from './status/slice';
 
 export const store = configurePersistedStore({
   reducer: {
-    // [counterSlice.name]: counterSlice.reducer,
-    'counter': reducer,
+    [counterSlice.name]: counterSlice.reducer,
+    // You can swap the slice with the reducer to test both implementations
+    // counter: counterReducer,
+    [statusSlice.name]: statusSlice.reducer,
   },
-}, localStorage)
+}, 'countersApp', localStorage);
 
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
+export type Store = Awaited<typeof store>;
+export type RootState = ReturnType<Store['getState']>;
+export type AppDispatch = Store['dispatch'];

example/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react()]
 })