Why data don't push to array in zustand?
Why data don't push to array?
I use React + Vite + TypeScript + tailwind + zustand + supabase
my store
export const increaseItemQuantity = async (products: IProduct[], id: string,newProduct:IProduct): Promise<IProduct[]> => {
try {
const { data } = await supabase
.from("products")
.select("id, label, price, img_url")
.eq("id", id);
console.log("data - ",data)
if (data === null) {
return products;
}
console.log("newProduct 1 - ",newProduct)
products = []
newProduct = {
id: data[0].id,
label: data[0].label,
price: data[0].price,
img_url: data[0].img_url,
quantity:1 //if data[0].id === id then quantity +1 else 1,
}
console.log("newProduct 2 - ",newProduct)
console.log("[...products, newProduct] - ",[...products, newProduct])
return [...products, newProduct];
} catch (error) {
console.error("increaseItemQuantity - ",error);
return products;
}
}
export const increaseItemQuantity = async (products: IProduct[], id: string,newProduct:IProduct): Promise<IProduct[]> => {
try {
const { data } = await supabase
.from("products")
.select("id, label, price, img_url")
.eq("id", id);
console.log("data - ",data)
if (data === null) {
return products;
}
console.log("newProduct 1 - ",newProduct)
products = []
newProduct = {
id: data[0].id,
label: data[0].label,
price: data[0].price,
img_url: data[0].img_url,
quantity:1 //if data[0].id === id then quantity +1 else 1,
}
console.log("newProduct 2 - ",newProduct)
console.log("[...products, newProduct] - ",[...products, newProduct])
return [...products, newProduct];
} catch (error) {
console.error("increaseItemQuantity - ",error);
return products;
}
}
const userCartStore = (set: any): UserCartStore => ({
products: [],
newProduct: { id:"",label: "", price: 0, img_url: "", quantity: 0 }, //it unused - so smth with it
increaseItemQuantity(id:string) {
set((state: UserCartStore) => ({
...state,
products: increaseItemQuantity(state.products,id, state.newProduct),
newProduct: { id:"",label: "", price: 0, img_url: "", quantity: 0 },
}));
},
const userCartStore = (set: any): UserCartStore => ({
products: [],
newProduct: { id:"",label: "", price: 0, img_url: "", quantity: 0 }, //it unused - so smth with it
increaseItemQuantity(id:string) {
set((state: UserCartStore) => ({
...state,
products: increaseItemQuantity(state.products,id, state.newProduct),
newProduct: { id:"",label: "", price: 0, img_url: "", quantity: 0 },
}));
},
1 Reply
codesandbox - https://codesandbox.io/p/sandbox/restless-night-tl6t7q
Solved
In updated code Dmitriy helped me change
export const increaseItemQuantityinDB = async (id:string) => {
//db manipulations here
const { data } = await supabase
.from("products")
.select("id, label, price, img_url")
.eq("id", id)
return (data && data.length >0) ? {
id: data[0].id,
label: data[0].label,
price: data[0].price,
img_url: data[0].img_url,
quantity:1 //logic
}
: null
}
const userCartStore = (set: any): UserCartStore => ({
products: new Array(),
cartQuantity:0,
async increaseItemQuantity(id:string) {
const newProduct = await increaseItemQuantityinDB(id)
if (newProduct) set((state: UserCartStore) => ({
...state,
products:[...state.products, newProduct],
cartQuantity:this.cartQuantity+1
}))
},
export const increaseItemQuantityinDB = async (id:string) => {
//db manipulations here
const { data } = await supabase
.from("products")
.select("id, label, price, img_url")
.eq("id", id)
return (data && data.length >0) ? {
id: data[0].id,
label: data[0].label,
price: data[0].price,
img_url: data[0].img_url,
quantity:1 //logic
}
: null
}
const userCartStore = (set: any): UserCartStore => ({
products: new Array(),
cartQuantity:0,
async increaseItemQuantity(id:string) {
const newProduct = await increaseItemQuantityinDB(id)
if (newProduct) set((state: UserCartStore) => ({
...state,
products:[...state.products, newProduct],
cartQuantity:this.cartQuantity+1
}))
},
products:[ ] to products: new Array()
And he explained me that I need do manipulation with backend first and than call set method