I have a list of products rendered by flatList and inside the component, I request a product image and store it in the redux store the problem is when image is updated the component doesn't re-rendered
productView component:
const ProductView: FC<Props> = ({ price }: Props): ReactElement => { const basketItem = useReduxSelector((state) => state.basket.items.find((item) => item.item.id === price.id) ); const productImage = useReduxSelector(state => state.product.productImage.find((item) => item.id === price.id)); const [isFocused, setIsFocused] = useState<boolean>(false); const [image, setImage] = useState<string>(productDefaultImage); const useDispatch = useReduxDispatch(); useEffect(() => { const getProductImage = async () => { const token: string | null = await localStorage.getValue("token"); getProductImageById(token!, price.id.toString()) .then((res) => { if (res.data.fileContent !== "") { useDispatch(updateProductImage({ id: price.id, fileName: res.data.fileName, fileContent: `data:image/jpeg;base64,${res.data.fileContent}` })) } else if (res.data.fileContent === "") { setImage(productDefaultImage); } }) .catch((error) => { console.log(error); }); }; if (!productImage) getProductImage(); else setImage(productImage.fileContent) }); console.log('Rendering product item with id:', price.priceId); return (<Layout style={styles.container}><View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Image source={{ uri: image }} resizeMode="contain" style={{ width: 100, height: 70 }} /><View style={styles.priceContainer}><Text style={styles.priceText}>{price.price}</Text><Text style={styles.currencyText}>دم</Text></View><PriceType quantityType={ price.sellUnit === SellUnitEnum.ATOMIC ? price.atomicRtlName : price.packingRtlName } /></View><View style={{ flex: 3 }}><View style={{ flex: 1, flexDirection: "row-reverse", justifyContent: "space-between", alignItems: "center", }}><Text style={{ width: "75%", textAlign: "right", fontFamily: "almarai-bold", marginRight: 3, }}> {price.rtlName}</Text> {price.withPoints ? <AwalPoint points={price.points} backgroundColor={Colors.gray200} textColor={Colors.gray800} /> : <View></View>}</View><View style={{ flex: 1, flexDirection: "row-reverse" }}><PackageQuantity title={price.atomicRtlName.toString() +" في"} packageName={price.packingRtlName} quantity={price.packageQuantity.toString()} image={require("../assets/surprise.png")} backgroundColor={Colors.primary400} containerStyle={{ flex: 1 }} /><PackageQuantity title="تمن" packageName={ price.sellUnit === "ATOMIC" ? price.packingRtlName : price.atomicRtlName } quantity={ (price.sellUnit === "ATOMIC" ? (price.price * price.packageQuantity).toFixed(2) : (price.price / price.packageQuantity).toFixed(2) ).toString() +" دم" } image={require("../assets/dollar.png")} backgroundColor={Colors.secondary400} containerStyle={{ flex: 1.5 }} /></View><View style={{ flex: 1, flexDirection: "row", paddingBottom: 7 }}> {basketItem === undefined && !isFocused ? (<Button style={{ height: 45, borderWidth: 0, borderRadius: 100, backgroundColor: Colors.secondary500, }} onPress={() => { useDispatch(updateItems({ item: price, quantity: 1, error: undefined, productImage: image })); }} accessoryRight={IconComponent(evaIcons.cart, Colors.white500)}> {(props) => (<Text {...props} style={{ fontFamily: "almarai-bold", fontSize: 15, color: Colors.white500, }}>أضفإلىالسلة</Text> )}</Button> ) : (<CounterInput style={{ flex: 1 }} priceId={price.id} isFocused={isFocused} setIsFocused={setIsFocused} maxValue={price.storeQuantity} buttonStyle={{ backgroundColor: Colors.primary500, borderWidth: 0 }} /> )}<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}> {(price.isDiscountable === true) ?<View style={{ flexDirection: 'row-reverse', justifyContent: 'center', alignItems: 'center' }}><Image source={require("../assets/promo.png")} resizeMode="contain" style={{ width: 30, height: 30 }} /><Text style={{ textAlign: 'center', fontFamily: 'almarai-regular' }}>فيهروميز</Text></View> : null}</View></View></View></Layout> );};const isChanged = (prev: Props, next: Props) => { return prev.price === next.price;}export default memo(ProductView, isChanged)GOAL: I want to rerender the component when the image state changed, is there's any way to do this?
