Why does my Redux Action fire twice when only called once?

Viewed 32

This is my onClick function:

const handleRunServicesClick = () => {
    setIsFetching(true);
    getImiginoVideoAction(articleId, videoUrl, selectedTab);
};

These are the relative actions:

getImiginoVideoAction: (articleId: string, videoUrl: string, imiginoServiceKey: string) => ({
    type: ActionTypes.GET_IMIGINO_VIDEO_ACTION,
    payload: { articleId, videoUrl, imiginoServiceKey },
}),
initiateVideoAutoTagService: (articleId: string, videoUrl: string, imiginoServiceKey: string) => ({
    type: ActionTypes.INITIATE_VIDEO_AUTOTAG_SERVICE,
    payload: { articleId, videoUrl, imiginoServiceKey },
}),
updateVideoAutotagMedia: (articleId: string, videoUrl: string, imiginoServiceKey: string) => ({
    type: ActionTypes.UPDATE_VIDEO_AUTOTAG_MEDIA,
    payload: { articleId, videoUrl, imiginoServiceKey },
}),

My getImiginoVideoAction epic looks like this and just fires off the relevant Action based on the service key:

export const getImiginoVideoAction: Epic<IGetImiginoVideoAction, RootState, any, any> = (action$, { getState }) =>
action$.pipe(
    ofType(ActionTypes.GET_IMIGINO_VIDEO_ACTION),
    map((action) => {
        const { videoUrl, articleId, imiginoServiceKey } = action.payload;
        switch (imiginoServiceKey) {
            case "auto-tag":
                return imiginoServicesActions.initiateVideoAutoTagService(articleId, videoUrl, imiginoServiceKey);
            case "transcribe":
                return imiginoServicesActions.initiateVideoTranscribeService(articleId, videoUrl, imiginoServiceKey);
            case "text":
                return imiginoServicesActions.initiateVideoTextService(articleId, videoUrl, imiginoServiceKey);
            case "celebrity":
                return imiginoServicesActions.initiateVideoCelebrityService(articleId, videoUrl, imiginoServiceKey);
            default:
                break;
        }
        return appActions.showSnackbarMessage("Service coming soon");
    })
);

And for some reason it always fires the "inatiate" Action twice, regardless of which service it is.

Here is one of the initiate actions:

export const initiateVideoTranscribeService: Epic<IGetImiginoVideoAction, RootState, any, any> = (
action$,
{ getState }

) => action$.pipe( ofType(ActionTypes.INITIATE_VIDEO_TRANSCRIBE_SERVICE), switchMap((action) => { const { videoUrl, articleId, imiginoServiceKey } = action.payload; const { esApiKey, esSearchBaseUrl, imiginoServicesUrl, imiginoServicesApiKey } = getState().launchConfig; const { email } = getState().user;

        return fromPromise(
            imiginoAdvancedVideoService.initiateVideoTranscribeService(
                imiginoServicesUrl,
                esSearchBaseUrl,
                esApiKey,
                articleId,
                imiginoServicesApiKey,
                email,
                videoUrl
            )
        ).pipe(
            map((data: string) => {
                return imiginoServicesActions.updateVideoTranscribeMedia(articleId, videoUrl, imiginoServiceKey);
            }),
            catchError((error) => {
                return of(appActions.showSnackbarMessage(failedFetchMessage));
            })
        );
    })
);

I really just want the initiate action to fire once and only once and it's driving me mad at this point. Any help would be greatly appreciated

0 Answers
Related