Реакция Redux: данные из src / components не обновляются на localhost

Question

У меня проблема с данными в моих src / components и src / redurs. Когда я делаю там изменения, я не вижу их на локальном хосте: 3000.

На локальном хосте вижу:

"Это название книги Это описание книги

usd. 499.99 "

И мои данные я вижу" Властелин колец "

Что я могу сделать, чтобы эти изменения были видны на локальном хосте?

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

Более эффективный способ, который также включает в себя гораздо меньше кода, состоит в том, чтобы хранить ваши данные в виде графа объектов с ключом идентификатора книги.

Таким образом, ваше начальное состояние будет выглядеть как

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

В вашей функции редуктора вы можете использовать клавишу 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)