"use client";

import React, { FC } from "react";
import { Provider } from "react-redux";

import { store, wrapper } from "./store";
interface ProviderType {
  children: React.ReactNode;
}
import { useStore } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

const ReduxProvider: FC<ProviderType> = ({ children }) => {
  const store: any = useStore();
  return (
    <>
      <PersistGate persistor={store._persistor} loading={<div>loading</div>}>
        {children}
      </PersistGate>
    </>
  );
};

export default wrapper.withRedux(ReduxProvider);

import { configureStore } from "@reduxjs/toolkit";
import type { TypedUseSelectorHook } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import todoReducer, { InitialState } from "./todoSlice";
import { Persistor, persistReducer, persistStore } from "redux-persist";
import { createWrapper } from "next-redux-wrapper";
import storage from "redux-persist/lib/storage";
const persistConfig = {
  key: "root",
  storage,
};

interface StoreType {
  __persistor: Persistor;
}

const persistedReducer = persistReducer(persistConfig, todoReducer);

const makeStore = () => {
  const store: any = configureStore({ reducer: persistedReducer });
  store.__persistor = persistStore(store);
  return store;
};

export const wrapper = createWrapper(makeStore);

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<InitialState> = useSelector;
export const store = configureStore({
  reducer: { todo: todoReducer },
  devTools: process.env.NODE_ENV !== "production",
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;