在 redux 中调度清除状态操作

Question

我在我的反应项目中使用 redux。我的问题是当一些使用状态的作品完成时如何清除状态。

例如，search我的 redux 商店中有状态。

search:{
  status: 'INIT',
  result: [],
}

由于我的搜索是异步请求，因此它具有status字段。

当用户搜索一个词时，它会调度'FETCH_SEARCH'使状态为'LOADING'。

获取完成后，它将调度“SUCCESS_SEARCH”或“FAILURE_SEARCH”以使状态为“SUCCESS”或“FAILURE”。

在我的显示搜索结果的组件中，它的呈现取决于search状态的状态。如果状态为“成功”，它将呈现搜索结果。

到目前为止，没有问题。

但是如果用户之前搜索过并且在一些作品之后尝试再次搜索怎么办？由于用户之前已经成功搜索过，因此search状态为“SUCCESS”状态。所以我的组件将呈现“不需要的”结果。

所以目前，我调度 'CLEAR_SEARCH' 动作来初始化search状态。

我的问题是如何在提交完成后清除 redux 状态。我做得对吗？还是反模式？

Answer 1

我以前这样做过，我所做的是遵循工作流程。

搜索提交后，您不应该清除状态。当用户再次搜索时，您应该重置它。

假设用户搜索“术语 A”。您已设置“SEARCH_SUCCESS”并呈现结果。当他再次搜索时，将该状态设为“正在搜索”或“正在加载”。

现在在你的渲染方法中，如果你有类似的东西

// etc..

if (isLoading) {
  return <LoadingComponent />
}

// etc..

您将在渲染任何结果之前渲染加载。然后您的搜索操作应该设置SUCCESS或FAILURE，如果您正确地映射了您的组件，它应该非常简单。

编辑

在评论部分进行了简短讨论后，您只希望在开始时（第一次呈现它时）使用INIT，然后仍然重置状态。

所以你可以去这个工作流程：

第一次： -> INIT -> SEARCH_TRIGGERED -> LOADING -> SUCCESS or FAILURE

第二次（仍然在同一个屏幕上）：-> SEARCH_TRIGGERED -> LOADING -> SUCCESS or FAILURE

然后您将拥有所需的工作流程。

希望我有所帮助