reactjs - 如何延迟 redux 状态更改以允许 React 组件中出现副作用

Question

抱歉，标题含糊不清。解释我的问题的最好方法可能是一个例子。

我在 redux 中有一个项目，并且该列表使用标准的 React-Redux 连接组件显示在 React 组件中。每个单独的项目都有一个按钮，单击该按钮会执行一些异步工作，然后从列表中删除该项目并将其放入其他位置显示的另一个列表中。在 redux 中处理启动异步工作的逻辑很重要，因为它对我的应用程序的状态很重要。

该基本功能有效，但现在我想向按钮添加反馈，以便当副作用成功时，它将标签更改为复选标记(为简单起见，如果请求，我将不执行任何操作并保持列表不变)在此示例中失败)。在从列表中删除之前，该项目将在带有复选标记的情况下再停留一秒钟。

问题是，如果我在异步工作完成后立即从列表中删除该项目，它会立即卸载，所以我需要延迟它。我一直在尝试想出一种方法来实现可在我的应用程序中重复使用的逻辑，因为我希望在应用程序的其他不相关部分中得到复选标记反馈。

简单的解决方案是在成功时调度一个操作，该操作仅更改状态以指示该项目的请求成功，然后执行 setTimeout 以在 1 秒后调度另一个操作，以实际从列表中删除该项目。

我觉得如果我在应用程序中有按钮的不同位置执行该逻辑，那么执行该逻辑将会变得非常重复。我希望不必为每个需要此功能的新按钮重复超时逻辑。但我希望我的应用程序显示的内容能够代表我的应用程序的当前状态。

以前有人处理过类似的问题吗？

谢谢

编辑:我认为它不应该真正改变一般解决方案，但我正在使用 redux-loop 来处理副作用。我觉得通用的解决方案可以很好地与 thunk 或 saga 或其他任何东西一起工作。

Answer 1

您提到您正在使用 redux-loop 来处理异步内容。我更熟悉 redux-thunk，所以如果你同意的话，我会给你一个使用 thunk 的答案。

如果您将超时设置在操作创建器中，然后从多个按钮调用该操作创建器，则可以保持代码干燥:

// actionCreators.js

const fetchTheThings = (url, successAction, failureAction, followUpAction) => (dispatch) => {

  //if you put the app in an intermediate state
  //while you wait for async, then do that here
  dispatch({ type: 'GETTING_THINGS' });

  //go do the async thing
  fetch(url)
    .then(res => {
      if (res.status === 200) return res.json();
      return Promise.reject(res);
    })
    .then(data => {
      //on success, dispatch an action, the type of which
      //you passed in as an argument:
      dispatch({ type: successAction, data });

      //then set your timeout and dispatch your follow-up action 1s later
      setTimeout(() => {
        dispatch({ type: followUpAction });
      }, 1000);
    })
    .catch(err => {
      //...and handle error cases
      dispatch({ type: failureAction, data: err });
    });
};

//then you can have exported action creators that your various buttons call
//which specify the action types that get passed into fetchTheThings()

export const actionFiredWhenButtonOneIsPressed = () => {
  return fetchTheThings('<some url>', '<success action>', '<failure action>', '<follow-up action>');
};

export const actionFiredWhenButtonTwoIsPressed = () => {
  return fetchTheThings('<other url>', '<other success action>', '<other failure action>', '<other follow-up action>');
};

希望这至少能给您一些想法。祝你好运!