Redux Tool

1"use client";
2 
3import React, { useEffect, useState } from "react";
4import { Provider } from "react-redux";
5import { persistKeys, store } from "@/redux/store";
6import { loadFromLocalStorage } from "@/lib/helper/storageLocal";
7import type { RootState } from "@/redux/store";
8 
9// ✅ generic helper to assign values type-safely by key
10function assignPersistedValue<K extends keyof RootState>(
11  target: Partial<RootState>,
12  key: K,
13  value: RootState[K]
14) {
15  target[key] = value;
16}
17 
18export default function StoreProvider({
19  children,
20}: {
21  children: React.ReactNode;
22}) {
23  const [ready, setReady] = useState(false);
24 
25  useEffect(() => {
26    const persisted: Partial<RootState> = {};
27 
28    persistKeys.forEach((key) => {
29      const value = loadFromLocalStorage<RootState[typeof key]>(key);
30      if (value !== undefined) {
31        // ✅ type-safe assignment with helper
32        assignPersistedValue(persisted, key, value);
33      }
34    });
35 
36    // Dispatch a rehydration event to Redux store
37    store.dispatch({
38      type: "__REHYDRATE__",
39      payload: persisted,
40    });
41 
42    // Prevent hydration mismatch (Next.js SSR safety)
43    requestAnimationFrame(() => setReady(true));
44  }, []);
45 
46  if (!ready) {
47    return <div suppressHydrationWarning />;
48  }
49 
50  return <Provider store={store}>{children}</Provider>;
51}