Search
Question:
How to add product to favorite screen without an error?

Array splice and push methods mutate the existing array reference. Create shallow copies then overwrite. In this case if you would like to remove an element then filter the current state, and when adding an element concatenate. Make sure you are updating and returning the correct state properties.


Example:

const reducer = (state = initialState, action) => {

  switch(action.type) {

    case 'ADD_PRODUCT_TO_FAVORITE':

      const product = action.payload;


      const index = state.FavoritesList.findIndex(

        (item)=> item?.id === product?.id

      );


      if (index !== -1) {

        return {

          ...state,

          products: state.FavoritesList.filter((_, i) => i !== index),

        };

      } else {

        return {

          ...state,

          products: state.FavoritesList.concat(product),

        };

      }


    case 'CLEAR':

      return { ...state, cart: [], FavoritesList: [] };

           

    default:

      console.log("unhandled action", { action });

      return state; // <-- just return current state

  }

};


Suggestion:

Instead of double-storing the product data, the "favorited" products should store just the product id. You can get back the complete favorites array derived from the products array filtered by products with a favorited id.


Example:

const initialState = {

  products: ProductData,

  cart: [],

  favorites: {},

};


const reducer = (state = initialState, action) => {

  switch(action.type) {

    case 'ADD_PRODUCT_TO_FAVORITE':

      const product = action.payload;


      return {

        ...state,

        favorites: {

          ...state.favorites,

          [product.id]: !state.favorites[product.id],

        },

      };


    case 'CLEAR':

      return { ...state, cart: [], favorites: {} };

           

    default:

      console.log("unhandled action", { action });

      return state; // <-- just return current state

  }

};


const { favorites, products } = useCart();


const favoritesList = products.filter(product => favorites[product.id]);


Answered by: >Drew Reese

Credit:> StackOverflow


Suggested blogs: 

>How you can send email from a shared inbox in Python

>How to read frame from ffmpeg subprocess in Python?

>What are the steps to fix error while downloading PDF file- Python

>Invoking Python script from scons and pass ARGLIST

>How to save python yaml and load a nested class?-Python


Submit
0 Answers
Top Questions
27-12-2023

How to add product to favorite screen without an error?

22-12-2023

How to set up Redux Provider for Jest Testing using React

23-02-2024

Fix largest contentful paint issue in next js image

22-12-2023

How to show status with red / green background depending on axios post result

19-02-2024

How to fix "slick-carousel/slick/slick.css" error in react?

Related Questions

How to show status with red / green background depending on axios post result
img
How to add product to favorite screen without an error?
img
How can I implement a toggle functionality in ReactJS?
img
Fix largest contentful paint issue in next js image
img
Check if the months in column is existing to the departments using react
img