Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

38
Views
When the value is not modified normally in the state using redux

When the like button is clicked, I want to set liked of book to true and then put it in a variable called likedBook.

But right now in my code, it is not added immediately.

case ADD_TO_LIST :
        return {
            ...state,
            books: state.books.concat({
                title: action.item.title,
                contents: action.item.contents,
                thumbnail: action.item.thumbnail,
                liked: false
            }),
        };
    case LIKED :
        return {
            ...state,
            books : state.books.map((book) => book.title === action.item.title ? {...book, liked: true} : book),
            likedBook : state.books.filter(((book)=> book.liked === true))
        }



export interface Book{
    title : String, 
    contents: String,
    thumbnail: String,
    liked: boolean
}

const initialState : {books: Book[]; likedBook: Book[];}= {
    books : [],
    likedBook: []
};

enter image description here

liked is true, but it is not added to likedBook. What's wrong with my code? And how do I fix it?

7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

I would first search for the book, then toggle the like property by title and add the entire book to the likedBook array.

case LIKED :
  // search if book already in state to like
  const book = state.book.find(book => book.title === action.item.title);

  // book found
  if (book) {
    // create new liked book object
    const likedBook = { ...book, liked: true };
    return {
      ...state,
      // map to new books array, add new liked book or existing book
      books: state.books.map((book) => book.title === action.item.title
        ? likedBook
        : book
      ),
      // append to new likedBook array
      likedBook : state.likedBook.concat(likedBook),
    }
  }
  // book not found, return current state
  return state;
  
7 months ago · Juan Pablo Isaza Report

0

In the return statement of case LIKED, It is not executed line by line.

Modify code like this.

case LIKED :
        return {
            ...state,
            books : state.books.map((book) => book.title === action.item.title ? {...book, liked: true} : book),
            likedBook : [...state.likedBook, state.books.find(book => book.title === action.item.title)]
        }
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs