2

我正在开发一个使用 Firebase(Cloud Firestore)、Redux 和 React-beautiful-DnD 的反应应用程序。

这是gif图像

每当我将 ToDo-Task 移动到另一列时，都会发生闪光。我认为原因是一次向 Cloud Firestore 调用多个请求。这是我用来向 Cloud Firestore 请求 update() 的代码。

注意：虽然我使用了“事务”，但我不愿意使用它，因为处理需要很长时间才能从 Cloud Functions 中捕获数据。虽然也使用了“批处理”，但同样发生了闪光。

  export const UpdateColumn = (newState, drraggableId) => {
  console.log(newState, drraggableId);
  return (dispatch, getState, { getFirebase, getFirestore }) => {
    const firestore = getFirestore();

    const taskId = drraggableId;
    const startColumnName = Object.keys(newState.newStart);
    const finishColumnName = Object.keys(newState.newFinish);


    firestore
      .collection("columns")
      .doc(startColumnName[0].toString())
      .update({
        taskIds: newState.newStart[startColumnName].taskIds
      });

    firestore
      .collection("columns")
      .doc(finishColumnName[0].toString())
      .update({
        taskIds: newState.newFinish[finishColumnName].taskIds
      });

    firestore
      .collection("projects")
      .doc(taskId)
      .update({
        currentColumn: finishColumnName[0]
      })
      .then(() => {
        dispatch({ type: "UPDATE_COLUMN_SUCCESS" });
      })
      .catch(err => {
        dispatch({ type: "UPDATE_COLUMN_ERROR", err });
      });
  };
};

以下是我在项目中使用的依赖项：

"firebase": "^7.6.1",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-beautiful-dnd": "^12.2.0",
"react-dom": "^16.12.0",
"react-redux": "^5.1.1",
"react-redux-firebase": "^2.2.4",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-firestore": "^0.11.0",
"redux-thunk": "^2.3.0"
4

1 回答 1

2

我有一个类似的问题。发生这种情况是因为对 Firebase 的调用是异步的，因此在执行之前会有一点延迟then。而 RBD 要求效果onDragEnd是同步的。

从文档中：

onDragEnd（必需）：拖动已结束。该响应者负责同步应用因拖动而导致的更改

解决方案是在调用 Firebase 之前手动更新您的状态。

于 2020-02-06T13:57:38.957 回答