diff --git a/payment-iq/app/redux/ReduxProvider.tsx b/payment-iq/app/redux/ReduxProvider.tsx index f6dd9c9..4eb6a55 100644 --- a/payment-iq/app/redux/ReduxProvider.tsx +++ b/payment-iq/app/redux/ReduxProvider.tsx @@ -1,9 +1,9 @@ // app/redux/ReduxProvider.tsx "use client"; -import React, { useEffect } from "react"; // Import useEffect +import React, { useEffect, useRef } from "react"; import { Provider } from "react-redux"; -import { store } from "./store"; +import { makeStore } from "./store"; import { initializeAuth } from "./auth/authSlice"; export default function ReduxProvider({ @@ -11,14 +11,16 @@ export default function ReduxProvider({ }: { children: React.ReactNode; }) { - // Get the dispatch function directly from the store for initial dispatch - const dispatch = store.dispatch; + // Create a store instance for this client-side session + const storeRef = useRef>(makeStore()); useEffect(() => { // Dispatch initializeAuth when the ReduxProvider component mounts on the client. // This ensures your Redux isLoggedIn state is synced with localStorage after a page refresh. - dispatch(initializeAuth()); - }, [dispatch]); // Dependency array ensures it runs only once on mount + if (storeRef.current) { + storeRef.current.dispatch(initializeAuth() as any); + } + }, []); - return {children}; + return {children}; } diff --git a/payment-iq/app/redux/advanedSearch/advancedSearchSlice.ts b/payment-iq/app/redux/advanedSearch/advancedSearchSlice.ts index 43b055c..b3f5dfc 100644 --- a/payment-iq/app/redux/advanedSearch/advancedSearchSlice.ts +++ b/payment-iq/app/redux/advanedSearch/advancedSearchSlice.ts @@ -1,25 +1,25 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; interface AdvancedSearchState { - keyword: string, - transactionID: string, - transactionReferenceId: string, - user: string, - currency: string, - state: string, - statusDescription: string, - transactionType: string, - paymentMethod: string, - psps: string, - initialPsps: string, - merchants: string, - startDate: null | string, - endDate: null | string, - lastUpdatedFrom: null | string, - lastUpdatedTo: null | string, - minAmount: string, - maxAmount: string, - channel: string, + keyword: string; + transactionID: string; + transactionReferenceId: string; + user: string; + currency: string; + state: string; + statusDescription: string; + transactionType: string; + paymentMethod: string; + psps: string; + initialPsps: string; + merchants: string; + startDate: null | string; + endDate: null | string; + lastUpdatedFrom: null | string; + lastUpdatedTo: null | string; + minAmount: string; + maxAmount: string; + channel: string; } const initialState: AdvancedSearchState = { @@ -45,12 +45,9 @@ const initialState: AdvancedSearchState = { }; const advancedSearchSlice = createSlice({ - name: 'advancedSearch', + name: "advancedSearch", initialState, - reducers: { - }, -}, -); + reducers: {}, +}); export default advancedSearchSlice.reducer; - diff --git a/payment-iq/app/redux/auth/selectors.ts b/payment-iq/app/redux/auth/selectors.ts index a5bb736..c74bf40 100644 --- a/payment-iq/app/redux/auth/selectors.ts +++ b/payment-iq/app/redux/auth/selectors.ts @@ -1,8 +1,6 @@ import { RootState } from "../types"; -export const selectIsLoggedIn = (state: RootState) => - state.authSlice.isLoggedIn; -export const selectStatus = (state: RootState) => state.authSlice?.status; -export const selectError = (state: RootState) => state.authSlice?.error; -export const selectAuthMessage = (state: RootState) => - state.authSlice?.authMessage; +export const selectIsLoggedIn = (state: RootState) => state.auth.isLoggedIn; +export const selectStatus = (state: RootState) => state.auth?.status; +export const selectError = (state: RootState) => state.auth?.error; +export const selectAuthMessage = (state: RootState) => state.auth?.authMessage; diff --git a/payment-iq/app/redux/store.ts b/payment-iq/app/redux/store.ts index 8906f07..095a10d 100644 --- a/payment-iq/app/redux/store.ts +++ b/payment-iq/app/redux/store.ts @@ -2,9 +2,22 @@ import { configureStore } from "@reduxjs/toolkit"; import advancedSearchReducer from "./advanedSearch/advancedSearchSlice"; import authReducer from "./auth/authSlice"; -export const store = configureStore({ - reducer: { - advancedSearch: advancedSearchReducer, - authSlice: authReducer, - }, -}); +export const makeStore = () => { + return configureStore({ + reducer: { + advancedSearch: advancedSearchReducer, + auth: authReducer, + }, + // Enable Redux DevTools + devTools: process.env.NODE_ENV !== "production", + }); +}; + +// Create the store instance +export const store = makeStore(); + +// Infer the type of makeStore +export type AppStore = ReturnType; +// Infer the `RootState` and `AppDispatch` types from the store itself +export type RootState = ReturnType; +export type AppDispatch = AppStore["dispatch"];