Zustand

android/app/build.gradle

@@ -136,7 +136,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "1.0.6"
+        versionName "2.0.6"
     }
     splits {
         abi {

package.json

@@ -54,6 +54,7 @@
     "react-native-encrypted-storage": "^2.1.0",
     "react-native-gesture-handler": "^1.5.3",
     "react-native-localize": "^1.4.0",
+    "react-native-navigation-bar-color": "^2.0.2",
     "react-native-paper": "^5.5.2",
     "react-native-reanimated": "^2.13.0",
     "react-native-restart": "^0.0.24",
@@ -66,7 +67,8 @@
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
-    "tsyringe": "^4.0.1"
+    "tsyringe": "^4.0.1",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",

src/App.tsx

@@ -1,13 +1,9 @@
 import React, { FC } from "react";
 import { Navigation } from "./navigation/mainNavigation";
-import { Provider, } from 'react-redux'
-import { store } from './redux/rootReducer'
 
 export const App: FC = () => {
     return (
-        <Provider store={store}>
-            <Navigation />
-        </Provider>
+        <Navigation />
     );
 }
 

src/Config/ErrorHandleUtils.ts

@@ -1,8 +1,8 @@
 import { Alert } from "react-native";
 import RNRestart from 'react-native-restart';
 
-export function handleApiError(error?: any, appDispatch?: any) {
-    Alert.alert("Error",error?.error || error)
+export function handleApiError(error?: any) {
+    Alert.alert("Error", error?.error || error)
 }
 
 function isDisplayError(message: string) {

src/components/appLoaderModal/AppLoaderModal.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import { View, StyleSheet, Modal } from 'react-native';
 import { ActivityIndicator } from 'react-native-paper';
-import { useSelector } from 'react-redux';
-import { APP_STATE } from 'redux/appStore/AppReducers';
+import { create } from 'zustand';
+
+export const useAppLoaderStore = create((set) => ({
+  isLoading: false,
+  showLoader: () => set((state) => ({ isLoading: true })),
+  hideLoader: () => set((state) => ({ isLoading: false })),
+}))
+
 
 const AppLoaderModal = () => {
-  const appState: APP_STATE = useSelector((state: any) => state.appReducers);
+  const isLoading = useAppLoaderStore((state) => state.isLoading)
 
   return (
     <Modal
       animationType="slide"
       transparent={true}
-      visible={appState.isLoading}
+      visible={isLoading}
     >
       <View style={styles.centeredView}>
         <View style={styles.modalView}>

src/navigation/appNavigation/AppNavigation.tsx

@@ -14,7 +14,6 @@ const Tab = createBottomTabNavigator();
 
 export const AppBottomTab = () => {
     const { t } = useTranslation();
-
     return (
         <>
             <AppLoaderModal />

src/navigation/mainNavigation.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useEffect, } from 'react';
-import { DARK_THEME_TYPE } from 'redux/themeStore/reducers';
-import { useDispatch, useSelector } from 'react-redux';
+import { userThemStore } from 'redux/themeStore/reducers';
 import {
     NavigationContainer,
     DefaultTheme as NavigationDefaultTheme,
@@ -13,22 +12,33 @@ import {
 } from 'react-native-paper'
 import { APP_CONST, Colors } from '../Config/Colors'
 import AppStatusBar from '@components/appStatusBar/appStatusBar';
-import { authSlice } from 'redux/authStore/authReducers';
 import AsyncStorage from '@react-native-community/async-storage';
 import { setTopLevelNavigator } from './NavigationService';
 import { AppBottomTab } from './appNavigation/AppNavigation';
 import AuthStackScreens from './authStack/AuthStackScreens';
-import { checkTheme } from 'redux/themeStore/action';
 import LoadingView from '@components/loadingView';
+import { useAuthStore } from 'redux/authStore/authReducers';
 
 export const Navigation: FC = () => {
-    const data: DARK_THEME_TYPE = useSelector((state: any) => state.themeReducer);
-    const authState = useSelector((state: any) => state.authReducer);
-    const authDispatch = useDispatch();
-    console.log("authState3", authState);
+    const { checkUserLoginAction } = useAuthStore((state) => state)
+    const { changeThemAction } = userThemStore((state) => state)
+    const { isDarkTheme } = userThemStore((state) => state.themStore)
+    const { isLoading, userLoggedIn } = useAuthStore((state) => state.useAuthStore)
+
+    const checkTheme = () => {
+        AsyncStorage.getItem(APP_CONST.CHECK_THEME).then((data) => {
+            if (data) {
+                const jsonValue = JSON.parse(data);
+                changeThemAction(jsonValue.isDarkTheme)
+            } else {
+                changeThemAction(false)
+
+            }
+        })
+    }
 
     useEffect(() => {
-        authDispatch(checkTheme());
+        checkTheme()
         checkIfLoggedIn();
     }, [])
 
@@ -37,13 +47,13 @@ export const Navigation: FC = () => {
             .then((value) => {
                 if (value) {
                     let data = JSON.parse(value);
-                    authDispatch(authSlice.actions.checkUserLoginAction(data));
+                    checkUserLoginAction(data)
                 } else {
-                    authDispatch(authSlice.actions.checkUserLoginAction(null));
+                    checkUserLoginAction(null)
                 }
             })
             .catch(() => {
-                authDispatch(authSlice.actions.checkUserLoginAction(null));
+                checkUserLoginAction(null)
             });
     };
 
@@ -75,19 +85,19 @@ export const Navigation: FC = () => {
         }
     }
 
-    if (authState.isLoading) {
+    if (isLoading) {
         return <LoadingView />;
     }
 
     return (
-        <PaperProvider theme={data.isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}>
-            <AppStatusBar isDarkTheme={data.isDarkTheme} />
+        <PaperProvider theme={isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}>
+            <AppStatusBar isDarkTheme={isDarkTheme} />
             <NavigationContainer
                 ref={(navigatorRef: any) => {
                     setTopLevelNavigator(navigatorRef);
                 }}
-                theme={data.isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}>
-                {authState.userLoggedIn ? (
+                theme={isDarkTheme ? CustomDarkTheme : CustomDefaultTheme}>
+                {userLoggedIn ? (
                     <AppBottomTab />
                 ) : (
                     <AuthStackScreens />

src/redux/UserListStore/action.ts

@@ -1,17 +1,20 @@
 import { call } from 'Network/services';
-import { handleApiError } from 'Config/ErrorHandleUtils';
-import { Dispatch } from 'redux';
-import { userListSlice } from './userListReducer';
-import { appSlice } from 'redux/appStore/AppReducers';
+import { useUserListStore } from './userListReducer';
 
+export const useUserListService = () => {
+  const actions = useUserListStore((state) => state)
+  const getServiceResponse = (queryParam: any) => {
+    call.getService(queryParam).then((responseAxios: any) => {
+      // appDispatch(userListSlice.actions.setUserDataAction(responseAxios.data))
+      actions.setUserDataAction(responseAxios.data)
+      // appDispatch(appSlice.actions.hideLoaderAction())
+    }).catch((error: any) => {
+      // appDispatch(appSlice.actions.hideLoaderAction())
+      // handleApiError(error, appDispatch);
+    });
+  }
+  return {
+    getServiceResponse
+  }
+}
 
-export const getServiceResponse = (queryParam: any): any => async (appDispatch: Dispatch) => {
-  appDispatch(appSlice.actions.showLoaderAction())
-  call.getService(queryParam).then((responseAxios: any) => {
-    appDispatch(userListSlice.actions.setUserDataAction(responseAxios.data))
-    appDispatch(appSlice.actions.hideLoaderAction())
-  }).catch((error: any) => {
-    appDispatch(appSlice.actions.hideLoaderAction())
-    handleApiError(error, appDispatch);
-  });
-};

src/redux/UserListStore/userListReducer.ts

@@ -1,60 +1,45 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { UserList } from 'models/responseType/UserListResponse'
+import { create } from 'zustand'
+
 export interface USER_LIST_STATE_TYPE {
-  isLoading: boolean;
-  error: string;
-  users: UserList[];
+  isLoading?: boolean;
+  error?: string;
+  users?: UserList[];
+  selected?: UserList;
+}
+interface IUseUserListStore {
+  userListStore: USER_LIST_STATE_TYPE;
+  setUserErrorAction: (data: string) => void;
+  setUserLoadingAction: () => void;
+  setUserDataAction: (data: UserList[]) => void;
+  selectUserAction: (data: UserList) => void;
 }
 
+
 const INITIAL_STATE: USER_LIST_STATE_TYPE = {
   isLoading: true,
   error: "",
   users: [],
+  selected: undefined
 }
 
-const setUserDataAction = (state: USER_LIST_STATE_TYPE, action: any) => {
-  let data = action.payload
-  return {
-    ...state,
-    users: data,
-    isLoading: false,
-    error: null,
-  }
-}
 
-const setUserErrorAction = (state: USER_LIST_STATE_TYPE, action: any) => {
-  return {
-    ...state,
-    isLoading: false,
-    error: action.payload
-  }
-}
+export const useUserListStore = create<IUseUserListStore>()((set) => ({
+  ...INITIAL_STATE,
+  userListStore: INITIAL_STATE,
+  setUserErrorAction: (data) => set((state) => ({
+    userListStore: {
+      ...state.userListStore, error: data
+    }
+  })),
+  setUserLoadingAction: () => set((state) => ({ userListStore: { ...state.userListStore, isLoading: false } })),
+  setUserDataAction: (data) => set((state) => ({ userListStore: { ...state.userListStore, users: data } })),
+  selectUserAction: (data) => set((state) => ({
+    userListStore: {
+      ...state.userListStore, selected: data
+    }
+  })),
+}))
 
-const setUserLoadingAction = (state: USER_LIST_STATE_TYPE) => {
-  return {
-    ...state,
-    isLoading: true,
-    error: null
-  }
-}
 
 
-//State slice
-export const userListSlice = createSlice({
-  name: "userListSlice",
-  initialState: INITIAL_STATE,
-  reducers: {
-    setUserErrorAction: (state, action: PayloadAction<USER_LIST_STATE_TYPE>) => {
-      return setUserErrorAction(state, action)
-    },
-    setUserLoadingAction: (state, action: PayloadAction<USER_LIST_STATE_TYPE>) => {
-      return setUserLoadingAction(state)
-    },
-    setUserDataAction: (state, action: PayloadAction<USER_LIST_STATE_TYPE>) => {
-      return setUserDataAction(state, action)
-    },
-  },
-});
-
-
-export default userListSlice.reducer;