quran/quran.com-frontend-next

Batch consecutive dispatches

Open

#738 opened on Nov 11, 2021

 (0 comments) (2 reactions) (0 assignees)TypeScript (616 forks)auto 404
help wanted

Repository metrics

Stars
 (1,888 stars)
PR merge metrics
 (PR metrics pending)

Description

Redux strongly recommends avoiding dispatching many actions in a row but our codebase contains multiple places that has consecutive dispatches for example:

const onPlayClick = () => {
    dispatch(setRepeatSettings(verseRepetition));
    dispatch(
      playFrom({
        chapterId: Number(chapterId),
        reciterId: reciter.id,
        verseKey: verseRepetition.from,
      }),
    );
    onClose();
  };

or

if (newYPosition > 50 && direction === ScrollDirection.Down) {
        dispatch({ type: setIsMobileMinimizedForScrolling.type, payload: true });
        dispatch({ type: setIsExpanded.type, payload: false });
        dispatch({ type: setIsVisible.type, payload: false });
      } else if (newYPosition >= 0 && direction === ScrollDirection.Up) {
        dispatch({ type: setIsMobileMinimizedForScrolling.type, payload: false });
        dispatch({ type: setIsExpanded.type, payload: true });
        dispatch({ type: setIsVisible.type, payload: true });
      }

We need to find a better way to handle those cases as this affects performance.

Contributor guide