React/Redux - 以状态存储项目并将其发送到数据库

Question

我正在构建一个应用程序，该应用程序的一部分是它允许人们收藏某些项目。他们只需单击 SVG 心形图标，它就会变成红色，并以 状态存储到 'favorites' 并且 它被发送到数据库 (MySQL)。如果他们再次单击该图标，它会变回灰色，将其从状态中删除，并运行另一次对数据库的提取以删除该项目。

我一直在尝试将它构建到我的 action creator 中，但我无法让它们同时工作（也就是说，我无法将它发送到状态和数据库）。然而，我确实让它在状态片中完美运行。我把它放在下面：

export const toggleFavorite = name => (dispatch, getState) => {
  const { searchResults, favorites } = getState()
  const currentSelection = filter(
    selection => selection.name === name,
    searchResults
  )
  const newFavorite = contains(currentSelection, favorites)
    ? reject(equals(currentSelection), favorites)
    : append(currentSelection, favorites)
  dispatch({
    type: SET_FAVORITE,
    payload: newFavorite
  })
}

所以，我的问题是：我在哪里以及如何将我的提取放入 back-end 以允许插入和删除？这是我最后一次失败的尝试：

export const toggleFavorite = name => async (dispatch, getState) => {
  const { searchResults, favorites } = getState()
  const currentSelection = filter(
    selection => selection.name === name,
    searchResults
  )
  const newFavorite = contains(currentSelection, favorites)
    ? reject(equals(currentSelection), favorites)
      await fetch(`http://localhost:5000/deletefavorite?user_id=1&selection_id=${currentSelection}`)
    : append(currentSelection, favorites)
      await fetch(`http://localhost:5000/addfavorite?user_id=1&selection_id=${currentSelection}`)

  dispatch({
    type: SET_FAVORITE,
    payload: newFavorite
  })
}

提前致谢！

Answer 1

您应该将三元条件替换为经典条件 if/else :

if (contains(currentSelection, favorites)) {
    const newFavorite = reject(equals(currentSelection), favorites);
    await fetch(`http://localhost:5000/deletefavorite?user_id=1&selection_id=${currentSelection}`);
    dispatch({
        type: SET_FAVORITE,
        payload: newFavorite
    });
} else {
    const newFavorite = append(currentSelection, favorites)
    await fetch(`http://localhost:5000/addfavorite?user_id=1&selection_id=${currentSelection}`);
    dispatch({
        type: SET_FAVORITE,
        payload: newFavorite
    });
}

React/Redux - 以状态存储项目并将其发送到数据库

React/Redux - Storing an item in state AND sending it to a database

mysql

reactjs

redux

redux-thunk

react-redux