如何在React/Redux中取消挂起的异步操作 [英] How to to cancel pending asynchronous actions in React/Redux

问题描述

请考虑以下情况:

当用户导航到页面时，将调度两个异步Redux操作以并行获取两组相关数据.如果这两个提取操作均失败，则组件将检测到该错误，并在下一个周期呈现错误组件，然后在挂载时分派 clearState 操作.

When user navigates to page, two asynchronous Redux actions are dispatched to fetch two sets of related data parallel. If either of these fetches fails, it will be detected by the component, which will render error component on next cycle, which in turn dispatches clearState action when mounting.

但是，其他措施仍然有待解决/拒绝，它将破坏清洁状态.目的是在调用 clearState 操作创建者时中断此(最好是许多其他)挂起的异步操作.AFAIK，无论如何，待处理的诺言都应采用解决/响应的方式.

However, the other action is still to be resolved/rejected and will spoil the clean state. Objective is to interrupt this (and preferably many other) pending asynchronous actions, when clearState action creator is called. AFAIK, pending promise should either way resolve/response, no matter what.

我想到的第一件事是向每个reducer引入INTERRUPTED标志，但是我无法围绕如何使用它来使后续的SUCCESS/ERROR动作不影响/返回默认状态的想法.

First thing to come in my mind is to introduce INTERRUPTED flag to each reducer, but I can't wrap my head around how to use it to make following SUCCESS/ERROR action not to affect / return the default state.

如何做到这一点，同时将复杂性降至最低?

How to do this, keeping the complexity at minimum?

推荐答案

我最近遇到了同样的问题，在该问题中，我不得不取消待处理或过时的异步redux操作.我通过创建一个取消redux动作中间件解决了这个问题.

I was recently faced with the same problem, in which I had to cancel pending or stale async redux actions. I solved it by creating a cancel redux actions middleware.

在redux中，我们有中间件的概念.因此，当您发送请求时，它将通过中间件列表.api回复后，其响应将在到达redux存储并最终到达UI之前通过许多中间件.

In redux we have the concepts of middlewares. So when you are sending the request it will go through a list of middlewares. Once the api responds back its response will pass through a number of middlewares before it reaches redux store and eventually your UI.

现在假设我们已经编写了一个取消中间件.api请求在启动时将通过此中间件，并且api响应时，api响应也将通过此中间件.

Now suppose we have written a cancel middleware. The api request will go through this middleware when it being initiated and the api response will also go through this middleware when the api responds back.

redux中的每个api请求都与一个动作相关联，每个动作都有一个类型和有效负载.

Each api request in redux is associated with an action, each action has a type and payload.

编写一个中间件，只要完成api请求，该中间件就会存储关联的操作类型.连同它一起，它存储一个标志，该标志指示是否放弃此操作.如果再次触发类似类型的操作，请将该标志设为true，表示放弃此操作.自此api请求的丢弃标志设置为true以来，如果上次操作的api响应到来，则从中间件发送null作为响应.

Write a middleware, which whenever an api request is done stores the action type associated. Along with it, it stores a flag which states whether to discard this action. If an action of similar type is fired again, make this flag true which says discard this action. When the api response comes for the previous action since the discard flag for this api request has been set to true, send null as response from the middleware.

有关此方法的详细信息，请参见此博客. https://tech.treebo.com/redux-middlewares一种取消redux-actions-7e08b51b83ce的方法

Look at this blog for detailed information about this approach. https://tech.treebo.com/redux-middlewares-an-approach-to-cancel-redux-actions-7e08b51b83ce

这篇关于如何在React/Redux中取消挂起的异步操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！