101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
/*
|
|
* File: Provider.tsx
|
|
* Description: Redux Provider wrapper with PersistGate
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Provider as ReduxProvider } from 'react-redux';
|
|
import { PersistGate } from 'redux-persist/integration/react';
|
|
import { store ,persistor} from '.';
|
|
import { Text, View } from 'react-native';
|
|
|
|
|
|
// ============================================================================
|
|
// PROVIDER COMPONENT
|
|
// ============================================================================
|
|
|
|
/**
|
|
* Store Provider Component
|
|
*
|
|
* Purpose: Wrap the app with Redux Provider and PersistGate
|
|
*
|
|
* Features:
|
|
* - Redux store provider
|
|
* - Redux Persist gate for state rehydration
|
|
* - Loading state during persistence
|
|
* - Error handling for persistence failures
|
|
*
|
|
* @param children - React children components
|
|
*/
|
|
interface StoreProviderProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Loading Component for PersistGate
|
|
*
|
|
* Purpose: Show loading state while Redux state is being rehydrated
|
|
*
|
|
* Features:
|
|
* - Simple loading indicator
|
|
* - Consistent with app theme
|
|
* - Minimal blocking UI
|
|
*/
|
|
const PersistLoadingComponent: React.FC = () => {
|
|
return (
|
|
<View >
|
|
<Text style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
backgroundColor: '#f5f5f5',
|
|
fontSize: 16,
|
|
color: '#666',
|
|
}}>Loading app data...</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Store Provider Component
|
|
*
|
|
* Purpose: Main provider component that wraps the app
|
|
*
|
|
* Features:
|
|
* - Redux Provider for state management
|
|
* - PersistGate for state persistence
|
|
* - Loading state during rehydration
|
|
*
|
|
*
|
|
* - Error handling for persistence issues
|
|
*/
|
|
export const StoreProvider: React.FC<StoreProviderProps> = ({ children }) => {
|
|
return (
|
|
<ReduxProvider store={store}>
|
|
<PersistGate
|
|
loading={<PersistLoadingComponent />}
|
|
persistor={persistor}
|
|
onBeforeLift={() => {
|
|
// Called before the store is lifted (rehydrated)
|
|
console.log('Redux store is about to be rehydrated');
|
|
}}
|
|
//@ts-ignore
|
|
onAfterLift={() => {
|
|
// Called after the store is lifted (rehydrated)
|
|
console.log('Redux store has been rehydrated');
|
|
}}
|
|
>
|
|
{children}
|
|
</PersistGate>
|
|
</ReduxProvider>
|
|
);
|
|
};
|
|
|
|
/*
|
|
* End of File: Provider.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|