Add createPersistedReducer in the example app

Author: tommasoberlose

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-1.0.1.tgz"
+    "rtk-persist": "../rtk-persist-v1.0.2-beta05.tgz"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

example/src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css'
-import { counterSlice } from './state/counter/slice'
+import { decrement, increment } from './state/counter/reducer'
 import { useAppDispatch, useAppSelector } from './state/hooks'
 
 
@@ -12,11 +12,17 @@ function App() {
     <>
       <h1>count is {count}</h1>
       <div className="card">
-        <button onClick={() => dispatch(counterSlice.actions.decrement())}>
+        {/* <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>
       </div>
     </>

example/src/state/counter/reducer.ts

@@ -0,0 +1,19 @@
+import { createAction } from "@reduxjs/toolkit";
+import { createPersistedReducer } from "rtk-persist";
+
+export const increment = createAction<number>('increment');
+export const decrement = createAction<number>('decrement');
+
+export const { reducer, reducerName } = createPersistedReducer(
+  'counter', // A unique name for the reducer
+  { value: 0 }, // Initial state
+  (builder) => {
+    builder
+      .addCase(increment, (state, action) => {
+        state.value += action.payload;
+      })
+      .addCase(decrement, (state, action) => {
+        state.value -= action.payload;
+      });
+  }
+);

example/src/state/store.ts

@@ -1,10 +1,12 @@
 import { configurePersistedStore } from 'rtk-persist'
-import { counterSlice } from './counter/slice'
+// import { counterSlice } from './counter/slice'
+import { reducer } from './counter/reducer'
 
 
 export const store = configurePersistedStore({
   reducer: {
-    [counterSlice.name]: counterSlice.reducer,
+    // [counterSlice.name]: counterSlice.reducer,
+    'counter': reducer,
   },
 }, localStorage)
 

example/yarn.lock

@@ -1466,9 +1466,15 @@ rollup@^4.40.0:
     "@rollup/rollup-win32-x64-msvc" "4.46.2"
     fsevents "~2.3.2"
 
-rtk-persist@../rtk-persist-1.0.1.tgz:
-  version "1.0.1"
-  resolved "../rtk-persist-1.0.1.tgz#6147a5578753304bf925ead4501849fbf2f75636"
+rtk-persist@../rtk-persist-v1.0.2-beta04.tgz:
+  version "1.0.2-beta04"
+  resolved "../rtk-persist-v1.0.2-beta04.tgz#6d62f4b55c1d3a03409b00f194f95622499ee3e1"
+  dependencies:
+    "@reduxjs/toolkit" "^2.8.2"
+
+rtk-persist@../rtk-persist-v1.0.2-beta05.tgz:
+  version "1.0.2-beta05"
+  resolved "../rtk-persist-v1.0.2-beta05.tgz#e05af5d3b38effc6f4d2d32bdd7326ff71e8028e"
   dependencies:
     "@reduxjs/toolkit" "^2.8.2"