Deleting with React Redux api delete request-CodePudding

i cannot delete a product, although it seems that everything looks fine and i see in console that action of type: REMOVE_SELECTED_PRODUCT occurs, the product is still in array and seems like the state is not updated??

So lets start with productActions.js

export const removeSelectedProduct = (id) => {
  return {
    type: REMOVE_SELECTED_PRODUCT,
    payload: id,
  };
};
export const removeProduct = (id) => {
  return async (dispatch) => {
    dispatch(removeSelectedProduct(id));
    try {
      console.log(id); // this is for test, and i see in console that proper id is printed
      await axios.delete(`https://fakestoreapi.com/products/${id}`);
    } catch (err) {
      console.log(err);
    }
  };
};

now the productsReducer.js

const intialState = {
  products: [],
};

export const productsReducer = (state = intialState, { type, payload }) => {
  switch (type) {
    case SET_PRODUCTS:
      return { ...state, products: payload };
    case ADD_PRODUCT:
      return { ...state, products: [...state.products, payload] };
    case REMOVE_SELECTED_PRODUCT:
      return {
        ...state,
        products: state.products.filter((el) => el.id !== payload),
      };
    default:
      return state;
  }
};

And i use it in ProductDetails.js as an button so there is a whole code of this component:

const ProductDetails = ({ removeProduct, product }) => {
  const { productId } = useParams();
  const { image, title, price, category, description } = product;
  const dispatch = useDispatch();
  const fetchProductDetail = async (id) => {
    const response = await axios
      .get(`https://fakestoreapi.com/products/${id}`)
      .catch((err) => {
        console.log("Err: ", err);
      });
    dispatch(selectedProduct(response.data));
  };

  useEffect(() => {
    if (productId && productId !== "") fetchProductDetail(productId);
  }, [productId]);
  return (
    <div>
      {Object.keys(product).length === 0 ? (
        <div>...Loading</div>
      ) : (
        <div>
          <img alt={productId} src={image} />

          <div>
            <h1>{title}</h1>
            <h2>
              <p>${price}</p>
            </h2>
            <h3>{category}</h3>
            <p>{description}</p>
            <button>Add to Cart</button>
            <button onClick={() => removeProduct(productId)}>Usuń</button>
          </div>
        </div>
      )}
    </div>
  );
};
const mapStateToProps = (state) => {
  return {
    products: state.allProducts.products,
    product: state.product,
  };
};

const mapDispatchToProps = {
  removeProduct,
  selectedProduct,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductDetails);

If anyone cant find the problem, i would be glad. As an i said the acction and the id is printed to the console: console output on clicking the button

Maybe there is some problem with state, and it dont update the state when i delete? Idk, please help me :(

CodePudding user response：

As product has number type id and you're providing string i.e 2 !== "2"

Do this:

    dispatch(removeSelectedProduct( id));//change string to number
...
...
    await axios.delete(`https://fakestoreapi.com/products/${ id}`);//similarly here