reactjs - 在 redux 中调度清晰的状态操作

Question

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

例如，我的 redux 存储中有 search 状态。

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

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

当用户搜索单词时，它将调度“FETCH_SEARCH”以使状态为“LOADING”。

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

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

到目前为止，没有问题。

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

所以目前，我调度“CLEAR_SEARCH”操作来初始化搜索状态。

我的问题是如何在提交完成后清除 redux 状态。我做得正确吗？或者它是反模式？

Answer 1

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

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

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

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

// etc..

if (isLoading) {
  return <LoadingComponent />
}

// etc..

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

编辑

在评论部分进行简短讨论后，您希望仅在开始时(第一次渲染时)INIT，但随后仍重置状态。

因此您可以采用此工作流程:

第一次:-> INIT -> SEARCH_TRIGGERED -> LOADING -> 成功或失败

第二次(仍在同一屏幕中):-> SEARCH_TRIGGERED -> 加载 -> 成功或失败

然后您将获得所需的工作流程。

希望有帮助