Transitioning From Async Storage to Context API in React Native With TypeScript

typescript
Copy code
import React, { createContext, useContext, useReducer, Dispatch } from 'react';

interface AppState {
 // Define your application state interface here
 exampleData: string;
}

interface AppAction {
 // Define action types and payload structure here
 type: string;
 payload?: any;
}

const initialState: AppState = {
 exampleData: '',
};

const AppContext = createContext<{
 state: AppState;
 dispatch: Dispatch<AppAction>;
}>({
 state: initialState,
 dispatch: () => null,
});

const appReducer = (state: AppState, action: AppAction): AppState => {
 // Implement your reducer logic here based on action types
 switch (action.type) {
 case 'UPDATE_DATA':
 return {
 ...state,
 exampleData: action.payload,
 };
 // Add other cases as needed
 default:
 return state;
 }
};

const AppProvider: React.FC = ({ children }) => {
 const [state, dispatch] = useReducer(appReducer, initialState);

 return (
 <AppContext.Provider value={{ state, dispatch }}>
 {children}
 </AppContext.Provider>
 );
};

const useAppContext = () => {
 return useContext(AppContext);
};

export { AppProvider, useAppContext };

import React from 'react';
import { useAppContext } from './AppContext';

const ExampleComponent: React.FC = () => {
 const { state, dispatch } = useAppContext();

 const updateData = () => {
 const newData = 'Updated Data';
 dispatch({ type: 'UPDATE_DATA', payload: newData });
 };

 return (
 <div>
 <p>{state.exampleData}</p>
 <button onClick={updateData}>Update Data</button>
 </div>
 );
};

export default ExampleComponent;

import React from 'react';
import { AppProvider } from './AppContext';
import ExampleComponent from './ExampleComponent';

const App: React.FC = () => {
 return (
 <AppProvider>
 <ExampleComponent />
 {/* Other components using the context */}
 </AppProvider>
 );
};

export default App;