How to remove elements from array using redux, immer, react - reactjs

Question

import produce from "immer";
const initialState = {
isLoading: true,
error: "",
burgers: [],
};
export default function (state = initialState, action) {
switch (action.type) {
case "ADD_BURGER_BUCKET": {
return produce(state, (draftState) => {
if (Array.isArray(action.payload)) {
draftState.burgers.push(...action.payload);
} else {
draftState.burgers.push(action.payload);
}
});
}
case "REMOVE_BURGERS_BUCKET": {
return produce(state, (draftState) => {
draftState.burgers = []
});
}
**case "REMOVE_ONE_BURGER_BUCKET": {
return produce(state, (draftState) => {
console.log(action.payload, draftState.burgers) console.log => 3 Proxy {0: {…}}
draftState.burgers.filter(el => el.id !== action.payload)
})
}** HERE THIS ONE DOES NOT WORK!!!
default:
return state;
}
}
return ( <===== BURGER BUTTON
<Burger
key={burger.id}
text={burger.name}
cost={burger.cost}
onClick={() => {
dispatch({
type: "REMOVE_ONE_BURGER_BUCKET",
payload: burger.id, <=== PASS ID TO REDUCER
}); <==== THIS ONE DOESN'T REMOVE THE ELEMENT FROM AN ARRAY
localStorage.setItem("burger", JSON.stringify(burger));
localStorage.setItem(
"burgersBucket",
JSON.stringify(
list.burgers.filter((el) => el.id !== burger.id)
)
);
history.push("/redo");
}}
/>
);
}
I want to remove element from array by its id, but I can't do it, that's what I get in the console
3 Proxy {0: {…}}
I have useselector and useDispatch hooks both imported.
FULL CODE
import React from "react";
import { Wrapper } from "../../styled/general";
import { Menu, MenuTitle, Burgers } from "../home/homestyled";
import Burger from "../../component/burger";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { useHistory } from "react-router-dom";
export default function Index() {
const list = useSelector((state) => state.burgerBucket);
const dispatch = useDispatch();
const history = useHistory();
useEffect(() => {
console.log(list.burgers);
if (list.burgers.length > 0) {
localStorage.setItem("burgersBucket", JSON.stringify(list.burgers));
} else {
let burgersBucket = JSON.parse(localStorage.getItem("burgersBucket"));
dispatch({ type: "ADD_BURGER_BUCKET", payload: burgersBucket });
}
}, []);
return (
<Wrapper>
<Menu>
<MenuTitle>My Bucket</MenuTitle>
<Burgers>
{[...list.burgers, { finish: true }, { addMore: true }].map(
(burger) => {
if (burger.addMore) {
return (
<Burger
key={-2}
bg={"lightgreen"}
text={"Додати ще"}
onClick={() => {
history.push("/");
}}
/>
);
}
if (burger.finish) {
return (
<Burger
key={-1}
bg={"#ff5050"}
text={"Завершити"}
onClick={() => {
dispatch({ type: "REMOVE_BURGERS_BUCKET" });
history.push("/");
}}
/>
);
}
return (
<Burger
key={burger.id}
text={burger.name}
cost={burger.cost}
onClick={() => {
dispatch({
type: "REMOVE_ONE_BURGER_BUCKET",
payload: burger.id,
});
localStorage.setItem("burger", JSON.stringify(burger));
localStorage.setItem(
"burgersBucket",
JSON.stringify(
list.burgers.filter((el) => el.id !== burger.id)
)
);
history.push("/redo");
}}
/>
);
}
)}
</Burgers>
</Menu>
</Wrapper>
);
}
enter code here
FULL CODE REDUCER
import produce from "immer";
const initialState = {
isLoading: true,
error: "",
burgers: [],
};
export default function (state = initialState, action) {
switch (action.type) {
case "ADD_BURGER_BUCKET": {
return produce(state, (draftState) => {
if (Array.isArray(action.payload)) {
draftState.burgers.push(...action.payload);
} else {
draftState.burgers.push(action.payload);
}
});
}
case "REMOVE_BURGERS_BUCKET": {
return produce(state, (draftState) => {
draftState.burgers = []
});
}
case "REMOVE_ONE_BURGER_BUCKET": {
return produce(state, (draftState) => {
console.log(action.payload, draftState.burgers)
draftState.burgers.filter(el => el.id !== action.payload)
})
}
default:
return state;
}
}
ALSO MAYBE THIS ONE WILL BE IMPORTANT, THIS IS THE CODE(PAGE) I GET REDIRECTED ONCE THE USER CLICKED THAT BURGER-BUTTON
FULL CODE
import React, { useEffect, useState, useContext } from "react";
import { Wrapper } from "../../styled/general";
import { Menu, MenuTitle } from "../home/homestyled";
import {
BurgerIngridients,
IngridientWrapper,
BurgerDetails,
DetailsTitle,
IngridientsDetails,
Total,
DetailsButtonContinue,
} from "./burgerredostyled";
import Ingridient from "../../component/Ingridient";
import IngridientdetailBlock from "../../component/IngridientsDetailBlock";
import { useHistory } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useBurger } from "../../hooks/useBurger";
import { sumOfToppings } from "../../helpers/sum";
export default function Index() {
const burger = useSelector((state) => state.burger);
const [toppings, error, isLoading] = useBurger(
"http://localhost:3000/toppings"
);
const dispatch = useDispatch();
const history = useHistory();
useEffect(() => {
if (burger.id) {
localStorage.setItem("burger", JSON.stringify(burger));
} else {
let localStorageBurger = JSON.parse(localStorage.getItem("burger"));
dispatch({ type: "ADD_BURGER", payload: localStorageBurger });
}
for (let i = 0; i < toppings.length; i++) {
for (let j = 0; j < burger.consists_of.length; j++) {
if (burger.consists_of[j].name === toppings[i].name) {
toppings[i].quantity = burger.consists_of[j].quantity;
}
}
}
if (toppings.length > 0) {
dispatch({
type: "ADD_BURGER",
payload: { ...burger, consists_of: toppings },
});
}
}, [isLoading]);
const add = (text, num) => {
for (let i = 0; i < toppings.length; i++) {
if (toppings[i].name === text) {
toppings[i].quantity = num;
}
}
dispatch({
type: "ADD_BURGER",
payload: { ...burger, consists_of: toppings },
});
localStorage.setItem(
"burger",
JSON.stringify({ ...burger, consists_of: toppings })
);
};
if (!isLoading)
return (
<Wrapper>
<Menu>
<MenuTitle>{burger && burger.name}</MenuTitle>
<IngridientWrapper>
<BurgerIngridients>
{burger.consists_of.map(({ name, quantity, id }) => {
return (
<Ingridient
key={id}
text={name}
add={add}
initValue={quantity}
/>
);
})}
</BurgerIngridients>
<BurgerDetails>
<DetailsTitle>
<span>{burger && burger.name} | інформація</span>{" "}
<DetailsButtonContinue
onClick={() => {
dispatch({
type: "ADD_BURGER_BUCKET",
payload: { ...burger, cost: sumOfToppings(burger) },
});
history.push("/bucket");
}}
>
продовжити
</DetailsButtonContinue>
</DetailsTitle>
<IngridientsDetails>
{burger.consists_of
.filter((el) => el.quantity > 0)
.map((el) => {
return (
<IngridientdetailBlock
key={el.id}
text={el.name}
price={el.quantity * el.cost}
qty={el.quantity}
></IngridientdetailBlock>
);
})}
</IngridientsDetails>
<Total>Загалом {sumOfToppings(burger)}(грн.)</Total>
</BurgerDetails>
</IngridientWrapper>
</Menu>
</Wrapper>
);
if (isLoading) {
return <span>loading</span>;
}
}

Answer 1

Array.prototype.filter does not mutate the array, it creates a new one.
So this:
draftState.burgers.filter(el => el.id !== action.payload)
is not actually changing draftState.burgers. But this will:
produce(state, (draftState) => {
draftState.burgers = draftState.burgers.filter(el => el.id !== action.payload)
})