saga integrated with redux store

Author: ShubhamBade

App.tsx

@@ -1,4 +1,4 @@
-import { View, Text,Button } from 'react-native'
+import { View, Text, Button } from 'react-native'
 import React, { useEffect } from 'react'
 import FirstComp from './components/FirstComp'
 import ButtonEvent from './components/ButtonEvent'
@@ -29,27 +29,19 @@ import PostApiComp from './components/apiInNative/PostApiComp'
 import APIListComp from './components/apiInNative/APIListComp'
 import HeaderComp from './components/reduxComponentUiTest/HeaderComp'
 import ProductComp from './components/reduxComponentUiTest/ProductComp'
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HeaderAndProduct from './HeaderAndProduct'
+import UserListNavigationRedux from './components/reduxComponentUiTest/UserListNavigationRedux'
+
+
+const Stack = createNativeStackNavigator();
 
 const App = () => {
   useEffect(() => {
     console.log("hello")
   }, [])
-  const products = [{
-    name: 'POCO M2 Pro',
-    price: '20000',
-    color: 'Navy Blue'
-  },
-  {
-    name: 'POCO M3 Pro',
-    price: '20000',
-    color: 'Navy Blue'
-  },
-  {
-    name: 'Mi 11 Pro',
-    price: '20000',
-    color: 'Navy Blue'
-  }
-  ]
+
   return (
     <View style={{ flex: 1 }}>
       <Text style={{ fontSize: 30, textAlign: 'center', color: "blue", marginTop: 10, fontWeight: "bold" }}>
@@ -85,12 +77,13 @@ const App = () => {
       {/* <SimpleFreeApi/> */}
       {/* <PostApiComp/> */}
       {/* <APIListComp/> */}
-      <HeaderComp />
-      <View style={{ flex: 13, backgroundColor: 'pink' }}>
-        {products.map((item) =>
-          <ProductComp item={item}/>
-        )}
-      </View>
+
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="HeaderAndProduct" component={HeaderAndProduct} />
+          <Stack.Screen name="UserListNavigationRedux" component={UserListNavigationRedux} />
+        </Stack.Navigator>
+      </NavigationContainer>
     </View>
   )
 }

HeaderAndProduct.js

@@ -0,0 +1,37 @@
+import { View, Text,Button } from 'react-native'
+import React from 'react'
+import HeaderComp from './components/reduxComponentUiTest/HeaderComp'
+import ProductComp from './components/reduxComponentUiTest/ProductComp'
+
+
+const HeaderAndProduct = ({navigation}) => {
+    const products = [{
+        name: 'POCO M2 Pro',
+        price: '20000',
+        color: 'Navy Blue'
+      },
+      {
+        name: 'POCO M3 Pro',
+        price: '20000',
+        color: 'Navy Blue'
+      },
+      {
+        name: 'Mi 11 Pro',
+        price: '20000',
+        color: 'Navy Blue'
+      }
+      ]
+    return (
+        <View style={{flex:1}}>
+            <Button title='Move to user List' onPress={()=>{navigation.navigate("UserListNavigationRedux")}}/>
+            <HeaderComp />
+            <View style={{ flex: 13, backgroundColor: 'pink' }}>
+                {products.map((item) =>
+                    <ProductComp item={item} key={item.name}/>
+                )}
+            </View>
+        </View>
+    )
+}
+
+export default HeaderAndProduct

components/reduxComponentUiTest/ProductComp.js

@@ -1,22 +1,39 @@
 import { View, Text,Button } from 'react-native'
-import React from 'react'
-import { addToCart } from '../../redux/action';
-import { useDispatch } from 'react-redux';
+import React, { useEffect, useState } from 'react'
+import { addToCart,removeFromCart } from '../../redux/action';
+import { useDispatch,useSelector } from 'react-redux';
 
 const ProductComp = (props) => {
     const item=props.item;
     const dispatch = useDispatch();
+    const cartItem=useSelector((state)=>state.reducer);
+
+    const[isAdded,setIsAdded]=useState(true);
 
     const handleAddToCart=(item)=>{
         //console.warn("Added" ,item);
         dispatch(addToCart(item))
     }
+    const handleRemoveFRomCart=(item)=>{
+        //console.warn(item);
+        dispatch(removeFromCart(item.name))
+    }
+    useEffect(()=>{
+        let result=cartItem.filter(element=>{
+            return element.name===item.name
+        })
+        if(result.length){
+            setIsAdded(false)
+        }else{
+            setIsAdded(true)
+        }
+    },[cartItem])
     return (
         <View key={item.name} style={{ alignItems: 'center', margin: 20 }}>
             <Text style={{ fontSize: 18 }}>{item.name}</Text>
             <Text style={{ fontSize: 18 }}>{item.price}</Text>
             <Text style={{ fontSize: 18 }}>{item.color}</Text>
-            <Button title='Add to Cart' onPress={()=>{handleAddToCart(item)}} />
+            <Button title={isAdded?'Add To Cart':"Remove from Cart"} onPress={()=>{isAdded?handleAddToCart(item):handleRemoveFRomCart(item)}} />
         </View>
     )
 }

components/reduxComponentUiTest/UserListNavigationRedux.js

@@ -0,0 +1,32 @@
+import { View, Text } from 'react-native'
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { fetchUserList } from '../../redux/action'
+
+const UserListNavigationRedux = () => {
+    const userListArray = useSelector((state) => state.reducer);
+    const userList = userListArray.length ? userListArray[0] : [];
+    console.warn(userList)
+
+    console.log(userList)
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(fetchUserList())
+    },[])
+    return (
+        <View style={{ flex: 1 }}>
+            {
+                userList.length ?
+                    userList.map((item) => {
+                        console.log("users names :",item.name);
+                        return (
+                            <Text style={{ fontSize: 18 }} key={item.id}>{item.name}</Text>
+                        );
+                    }) :
+                    <Text>No Data</Text>
+            }
+        </View>
+    )
+}
+
+export default UserListNavigationRedux

package-lock.json

@@ -14,6 +14,7 @@
     "@react-navigation/material-bottom-tabs": "^6.2.15",
     "@react-navigation/material-top-tabs": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
     "@reduxjs/toolkit": "^1.9.5",
     "react": "18.2.0",
@@ -25,7 +26,8 @@
     "react-native-screens": "^3.20.0",
     "react-native-vector-icons": "^9.2.0",
     "react-redux": "^8.0.5",
-    "redux": "^4.2.1"
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package.json

@@ -1,8 +1,19 @@
-import { ADD_TO_CART } from "./constants";
+import { ADD_TO_CART,REMOVE_FROM_CART,USER_LIST } from "./constants";
 
 export function addToCart(item){
     return {
         type:ADD_TO_CART,
         data:item
     }
-}
+}
+export const removeFromCart=(item)=>{
+    return{
+        type:REMOVE_FROM_CART,
+        data:item
+    }
+}
+
+export const fetchUserList = () => ({
+    type: USER_LIST,
+  });
+  

redux/action.js

@@ -1 +1,4 @@
-export const ADD_TO_CART="add_to_cart";
+export const ADD_TO_CART="add_to_cart";
+export const REMOVE_FROM_CART="remove_from_cart";
+export const USER_LIST ="user_list";
+export const SET_USER_DATA="set_user_data";