2

I am developing a react-application that uses Firebase(Cloud Firestore), Redux and React-beautiful-DnD.

Here is gif image

Whenever I move ToDo-Task to another column, a flash happening. I assume the reasons are for calling multiple requests to Cloud Firestore at once. Here is the code I use to request update() to Cloud Firestore.

Note: I used "transaction" though, I'm not willing to use it because the processing takes a long time to catch the data from Cloud Functions. Also used "batch" though, a flash happened likewise.

  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 });
      });
  };
};

Following are the dependencies I am using in the project:

"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"
Taichi Tsujioka
  • 21
  • 4
  • Did you find a solution? I have the same problem. I have an aweful lot of re-renders. Could this be your problem too? – Rockiger Apr 30 '20 at 07:58

1 Answers1

2

I'm having a similar problem. This can be happening because the call to Firebase is asynchronous, so there is a bit of a delay before your then is been executed. And RBD requires that the effect onDragEnd be synchronous.

From the documentation:

onDragEnd (required): A drag has ended. It is the responsibility of this responder to synchronously apply changes that has resulted from the drag

The solution would be to uptade your state by hand before calling Firebase.

Dimas Cyriaco
  • 91
  • 3