Explore category to store

app/(explore)/category.tsx

@@ -8,7 +8,7 @@ import {
 import { useEffect, useState } from 'react';
 import RenderHtml from 'react-native-render-html';
 import { useNavigation } from '@react-navigation/native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useSelector } from 'react-redux';
 
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -18,23 +18,18 @@ export default function CategoryScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const navigation = useNavigation();
     const [ description, setDescription ] = useState( '' );
+    const viewCategory = useSelector((state: any) => state.data.viewCategory);
 
     // Load item from storage
     useEffect( () => {
-        AsyncStorage.getItem( 'activeCategory' ).then( (data) => {
-            const itemData: any = JSON.parse( data ?? '{}' );
+        const { name, description } = viewCategory;
 
-            if (itemData != null) {
-                const { name, description } = itemData;
+        // Set description
+        // @ts-ignore
+        setDescription( description );
 
-                // Set description
-                // @ts-ignore
-                setDescription( description );
-
-                // Set page title
-                navigation.setOptions( { title: name } );
-            }
-        } );
+        // Set page title
+        navigation.setOptions( { title: name } );
     }, [] );
 
     // HTML render props

app/(tabs)/explore.tsx

@@ -13,7 +13,6 @@ import { router } from 'expo-router';
 import type { AutocompleteDropdownRef } from 'react-native-autocomplete-dropdown'
 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
 import Modal from "react-native-modal";
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
@@ -21,6 +20,8 @@ import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { Request } from '@/services/request';
 import List from '@/components/List';
+import { store } from '@/store/store';
+import { setViewCategory } from '@/store/dataStore';
 
 export default function ExploreScreen() {
     const colorScheme = useColorScheme() ?? 'light';
@@ -67,7 +68,7 @@ export default function ExploreScreen() {
 
     // View item in sub screen
     const viewItem = async (item: any) => {
-        await AsyncStorage.setItem( 'activeCategory', JSON.stringify( item ) );
+        store.dispatch(setViewCategory(item));
 
         router.push( '/(explore)/category' );
     };

store/dataStore.tsx

@@ -21,6 +21,7 @@ const dataStore = createSlice( {
             },
         },
         reloadCalendar: true,
+        viewCategory: null,
     },
     reducers: {
         setSession: (state, action) => {
@@ -29,10 +30,14 @@ const dataStore = createSlice( {
         setReloadCalendar: (state, action) => {
             state.reloadCalendar = action.payload;
         },
+        setViewCategory: (state, action) => {
+            state.viewCategory = action.payload;
+        },
     },
 } );
 
 export const { setSession } = dataStore.actions;
 export const { setReloadCalendar } = dataStore.actions;
+export const { setViewCategory } = dataStore.actions;
 
 export default dataStore.reducer;