У меня есть приложение для реагирования, использующее Redux. Прямо сейчас у меня есть список книг, показываемых с помощью redux, и я хотел бы внедрить в него CRUD. Код для перечисления книг:
listBooks(){
return this.props.books.map((books) => {
return(
<tbody key = {books.title}>
<tr className = "tr-book">
<td>{books.series}</td>
<td>{books.title}</td>
<td>Vol. {books.volume}</td>
<td>
<button onClick = {() => deleteBook(this.props.books, books.id)}className = "btn-action">Delete</button>
<button onClick = {() => editBook(this.props.books)}className = "btn-action">Update</button>
</td>
</tr>
</tbody>
);
})
}
И это прекрасно. Действие deleteBook имеет следующее действие:
export function deleteBook (book, id) {
book = book.filter(function(book){
return book.id !== id
});
console.info(book.id);
return {
type: "BOOK_DELETED",
payload: book
}
}
И это не работает. Я пробовал несколько подходов, но большинство из них не сработало, потому что книга - это не массив, а скорее объект массивов. В этом случае, как я могу сказать функции deleteBook, чтобы она отфильтровывала эти книги и возвращала только те, которые были book.id !== id?
Обновлено: Вот где устанавливаются книги:
export default function listBooks() {
return[
{
id: 1,
volume: 1,
series: 'A Song of Ice and Fire',
title: 'Game of Thrones',
rank: 0
},
{
id: 2,
volume: 2,
series: 'A Song of Ice and Fire',
title: 'Clash of Kings',
rank: 0
},
{
id: 3,
volume: 3,
series: 'A Song of Ice and Fire',
title: 'Storm of Swords',
rank: 0
},
{
id: 4,
volume: 4,
series: 'A Song of Ice and Fire',
title: 'A Feast of Crows',
rank: 0
}, {
id: 5,
volume: 5,
series: 'A Song of Ice and Fire',
title: 'A Dance With Dragons',
rank: 0
}, {
id: 6,
volume: 1,
series: 'The Lord of the Rings',
title: 'The Fellowship of the Ring',
rank: 0
}, {
id: 7,
volume: 2,
series: 'The Lord of the Rings',
title: 'The Two Towers',
rank: 0
}, {
id: 8,
volume: 3,
series: 'The Lord of the Rings',
title: 'The Return of the King',
rank: 0
}
]
}
Согласитесь с Шубхамом выше, каково первоначальное состояние книг? Какова его структура данных?
Добавлен новый код @ShubhamKhatri
Действие не должно изменять книгу. Вы должны написать редуктор, который сделает это, когда получит действие в качестве аргумента



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваши книги - это массив объектов для одного, а не объект массивов
Во-вторых, вы должны отфильтровать книгу для удаления в редукторе, а не в действии, и, следовательно, ваш редуктор будет выглядеть как
export function booksReducer (state = initialState, action) {
switch(action.type) {
...
case 'DELETE_BOOK': return state.filter(function(book){
return book.id !== action.id
});
...
}
}
и ваше действие будет
export function deleteBook (id) {
return {
type: "DELETE_BOOK",
payload: id
}
}
и вызовите действие, подобное
listBooks(){
return this.props.books.map((books) => {
return(
<tbody key = {books.title}>
<tr className = "tr-book">
<td>{books.series}</td>
<td>{books.title}</td>
<td>Vol. {books.volume}</td>
<td>
<button onClick = {() => deleteBook(books.id)}className = "btn-action">Delete</button>
<button onClick = {() => editBook(this.props.books)}className = "btn-action">Update</button>
</td>
</tr>
</tbody>
);
})
}
какова структура книг, не уверен, что вы имеете в виду под объектом массивов