在使用redux的状态下不正常修改值时

Question

当点赞按钮被点击时，我想把喜欢的书设置为真，然后把它放在一个名为 likedBook 的变量中。

但现在在我的代码中，它并没有立即添加。

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 是真的，但是没有添加到likedBook。我的代码有什么问题？我该如何解决？

Answer 1

case LIKED的return语句中，没有逐行执行。

像这样修改代码。

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)]
        }

Answer 2

我会先搜索这本书，然后通过 title 切换 like 属性并将整本书添加到 likedBook 数组。

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;

在使用redux的状态下不正常修改值时

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

javascript

reactjs

react-redux