Redux Thunk无法从API删除书籍问题求助

问题根源 #

删除操作仅更新了前端状态，未成功触发API的后端删除逻辑，导致页面刷新后数据恢复。

代码错误点及修复 #

1. 组件删除参数传递错误 #

Book组件中点击按钮时传递的是{item_id}对象，但deleteBooks thunk需要的是字符串类型的书籍ID，导致API请求URL错误（变成BOOK_URL/[object Object]）。

错误代码：

onClick={() => deleteHandler({item_id})}

修复后：

onClick={() => deleteHandler(item_id)}

2. DELETE请求冗余参数 #

根据Bookstore API规则，DELETE请求无需在body中传递item_id（ID已包含在URL路径中），多余的body会导致API拒绝处理。

错误代码：

const response = await fetch(`${BOOK_URL}/${bookId}`,  {
 method: 'DELETE',
  body: JSON.stringify({
    item_id: bookId
  }),
  headers: {
    'Content-Type': 'application/json',
  },
});

修复后：

const response = await fetch(`${BOOK_URL}/${bookId}`,  {
 method: 'DELETE',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. Thunk中状态更新逻辑错误 #

removeBook action需要接收含item_id的对象，但当前传递的是字符串ID，同时应确保API请求成功后再更新前端状态，避免请求失败时错误删除UI数据。

错误代码：

export const deleteBooks = createAsyncThunk(REMOVE, async (bookId, thunkAPI) => {
  const response = await fetch(`${BOOK_URL}/${bookId}`,  {
   method: 'DELETE',
    body: JSON.stringify({
      item_id: bookId
    }),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  await thunkAPI.dispatch(removeBook(bookId));
  return response.data;
});

修复后：

export const deleteBooks = createAsyncThunk('books/delete', async (bookId, thunkAPI) => {
  const response = await fetch(`${BOOK_URL}/${bookId}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
    },
  });

  if (!response.ok) {
    throw new Error('删除书籍失败');
  }

  thunkAPI.dispatch(removeBook({ item_id: bookId }));
  return bookId;
});

4. 可选：统一AsyncThunk状态更新 #

建议直接监听createAsyncThunk生成的fulfilled action来更新状态，替代手动dispatchremoveBook，让逻辑更清晰：

const bookReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD:
      return [...state, action.book];
    case FETCH_BOOKS: {
      const bookList = [];
      Object.entries(action.books).forEach(([key, value]) => bookList.push({
        item_id: key,
        title: value[0].title,
        author: value[0].author,
        category: value[0].category,
      }));
      return bookList;
    }
    case deleteBooks.fulfilled:
      return state.filter(book => book.item_id !== action.payload);
    default:
      return state;
  }
};

验证步骤 #

修复完成后，点击删除按钮：

• 检查浏览器网络请求，确认DELETE请求URL正确且返回成功状态码
• 刷新页面，确认对应书籍已从API中移除

内容的提问来源于stack exchange，提问作者David Daniel Zambrano Corral