Allow executing effects that have become unsubscribed to be canceled by listenerMiddleware.clearListeners

[chris-chambers]

Tasks created following the polling example given in complex async workflows can't be canceled by listenerMiddleware.clearListeners. Any time a listener is unsubscribed before it has finished running, this condition can occur.

This PR updates listener middlewares to explicitly track executing listeners (which may or may not be unsubscribed), so that cancelation can happen in all cases.

---

Here's a small reproduction, based on the example from the docs (there are a couple more scenarios in the accompanying tests):

const eventPollingStarted = createAction('serverPolling/started')

listenerMiddleware.startListening({
  actionCreator: eventPollingStarted,
  effect: async (action, listenerApi) => {
    // Stop listening for this action
    listenerApi.unsubscribe()

    const pollingTask = listenerApi.fork(async (forkApi) => {
      try {
        // Cancellation-aware indefinite pause
        await forkApi.pause(new Promise(() => {}))
      } catch (err) {
        if (err instanceof TaskAbortError) {
          // Never runs
          console.log('pollingTask aborted')
        }
      }
    })

    try {
      // Wait indefinitely
      await listenerApi.condition(() => false)
      pollingTask.cancel()
    } catch (err) {
      if (err instanceof TaskAbortError) {
        // Never runs
        console.log('top-level task aborted')
      }
    }
  },
})

store.dispatch(eventPollingStarted())

// Some time later, while the tasks are still running, call clearListeners.
setTimeout(() => {
  listenerMiddleware.clearListeners()
}, 500);

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8c25944:

Sandbox	Source
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	8c25944
🔍 Latest deploy log	https://app.netlify.com/projects/redux-starter-kit-docs/deploys/68e80f7ada7eee0007e346e2
😎 Deploy Preview	https://deploy-preview-5102--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.