Итак, я использую Firebase Firestore в своем приложении React. Я использую приведенный ниже код для извлечения товаров, которые были добавлены в корзину из Firestore.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
firebase
.firestore()
.collection(user.displayName)
.doc("Cart")
.collection("cartItems")
.onSnapshot(snapShot => {
const newItems = snapShot.docs.map(doc => ({
id: doc.id,
name: doc.data().name,
category: doc.data().category,
MRP: doc.data().MRP,
shagunPrice: Math.round(doc.data().shagunPrice),
count: doc.data().count,
}))
if (mounted) setItems(newItems)
})
}
})
Я использую этот код внутри useEffect()
, так что я могу обновить компонент, если какой-либо предмет добавлен в корзину.
useEffect(() => {
//above code
}, [firebase, cartItems])
Но проблема в том, что есть несколько компонентов и страниц, которые требуют элементы корзины для некоторых целей. И я использую один и тот же код для всех компонентов и страниц, который не удовлетворяет принципу DRY (не повторяйся).
Я хочу написать код в одном размещать и получать доступ к элементам корзины в моем приложении, а также получать последние элементы, добавленные в корзину.