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: []
};
liked is true, but it is not added to likedBook. What's wrong with my code? And how do I fix it?
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;
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)]
}