How to dispatch second action only when first action is fulfilled ? ReduxTK

Question

I currently have a listenerMiddleware that dispatches login after signup is dispatched. However, I only want to dispatch login IF signup is fulfilled.

//Store.js

listenerMiddleWare.startListening({
    matcher: isAnyOf(signup),
    effect: async (action, listenerAPI) => {
        listenerAPI.cancelActiveListeners();
        await listenerAPI.delay(50)
        listenerAPI.dispatch(login(action.payload))
    }
})

//userSlice.js 

export const signup = createAsyncThunk(
    'userAuth/signup',
    async (payload, thunkAPI) => {
        const { email, password } = payload
        const result = await fetch(
            signupPath, {
            mode: 'cors',
            credentials: 'include',
            method: "post",
            body: JSON.stringify({ email, password }),
            headers: {
                'Content-Type': 'application/json'
            }
        }
        )
        return result.json()
    }
)

export const login = createAsyncThunk(
    'userAuth/login',
    async (payload, thunkAPI) => {
        const { email, password } = payload
        const result = await fetch(
            loginPath, {
            mode: 'cors',
            credentials: 'include',
            method: 'post',
            body: JSON.stringify({ email, password }),
            headers: {
                'Content-Type': 'application/json'
            },
        }
        )
        if (!result.ok) {
            return thunkAPI.rejectWithValue({
                status: result.status,
                message: await result.text(),
            });
        }

        return result.json()

    }
)

How can i approach this problem? thanks

Answer 1

Use isAFulfilledAction

listenerMiddleWare.startListening({
    matcher: isAFulfilledAction(signup),
    effect: async (action, listenerAPI) => {
        listenerAPI.cancelActiveListeners();
        await listenerAPI.delay(50)
        listenerAPI.dispatch(login(action.payload))
    }
})