React Redux：来自 src/components 的数据未在 localhost 上更新

Question

我的 src/components 和 src/reducers 中的数据存在问题。当我在那里进行更改时，我在 localhost:3000 上看不到它们。

在本地主机上我看到：

“这是书名 这是书的描述

美元。 499.99"

我的数据我看到了《指环王》

如何使这些更改在 localhost 上可见？

https://github.com/ivanradunkovic/bookstore

例如：

// BOOKS REDUCERS
export function booksReducers(state={
    books: 
        [{
            _id: 1,
            title: 'The Lord of the Rings: The Fellowship of the Ring',
            description: 'A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron.',
            price: 20.01
        }, 
        {
            _id: 2,
            title: 'This is a second book title',
            description: 'This is the second book description',
            price: 325.25
        }]
}, action) {
    switch(action.type) {
        case "GETT_BOOK": 
        return {...state, books:[...state.books]};

        case "POST_BOOK": 
        // let books = state.books.concat(action.payload);
        // return {books};
        return {books:[...state.books, ...action.payload]};

        case "DELETE_BOOK":
        // Create a copy of the current array of books
        const currentBookToDelete = [...state.books]
        // Determine at which index in books array is the book to be deleted
        const indexToDelete = currentBookToDelete.findIndex(
          function(book){
            return book.title === action.payload;
          }
        )
        //use slice to remove the book at the specified index
        return {books: [...currentBookToDelete.slice(0, indexToDelete), ...currentBookToDelete.slice(indexToDelete + 1)]}

        case "UPDATE_BOOK":
        // Create a copy of the current array of books
        const currentBookToUpdate = [...state.books]
        // Determine at which index in books array is the book to be deleted
        const indexToUpdate = currentBookToUpdate.findIndex(
          function(book){
            return book._id === action.payload._id;
          }
        )
        // Create a new book object with the new values and with the same array index of the item we want to replace. To achieve this we will use ...spread but we could use concat methos too
        const newBookToUpdate = {
          ...currentBookToUpdate[indexToUpdate],
          title: action.payload.title
        }
        // This Log has the purpose to show you how newBookToUpdate looks like
        console.log("what is it newBookToUpdate", newBookToUpdate);
        //use slice to remove the book at the specified index, replace with the new object and concatenate witht he rest of items in the array
        return {books: [...currentBookToUpdate.slice(0, indexToUpdate), newBookToUpdate, ...currentBookToUpdate.slice(indexToUpdate + 1)]}
      }
    return state;
};

Answer 1

一种更有效的方法是使用更少的代码，将数据存储为对象图，并以图书 ID 为键。

所以你的初始状态会喜欢

books: {
  1: {
       id: 1,
       title: 'Lord of the rings',
       ...the rest
     },
  2: {
       id: 2,
       ... the rest
     }
}

在你的 reducer 函数中，你可以使用 id 键更轻松地查找或更新项目

case 'UPDATE_BOOK':
  return {
    ...state.books,
    [action.payload.id]: action.payload
  }

case 'DELETE_BOOK'
  const next = {...state.books}
  delete next[action.payload]

  return {
    ...state,
    books: next
  }

我意识到这并不能完全解决您的问题，我只是为您提供另一种存储数据的方法，这意味着您不必在任何地方都对数组进行过滤。

返回值只需Object.values(state.books)