Question

比方说我下面有这段代码：

switch (action.type) {
    case "GET_LIST":
        // update state
        break;
    case "GET_LIST_SUCCESS":
        // update state
        break;
    case "GET_LIST_ERROR":
        // update state
        break;
    default:
        return state;
}

在此之前，我已经设置了一些动作创建者（带有用于异步请求的笨拙的中间件）。因此流将为GET_LIST > GET_LIST_SUCCESS或GET_LIST > GET_LIST_ERROR。

现在，在我的React组件中，我想根据最后分配的操作类型（成功或错误）来做些事情。

使用动作类型本身是一种好习惯，还是应该只使用存储状态来满足我的条件？在此示例中，我的商店将具有一个error属性，我可以使用该属性来检测是否存在错误。

因此（使用动作类型）是

if (actiontype === "GET_LIST_SUCCESS") {
  // do something
}

OR（使用存储状态）

if (this.props.list.length > 0) {
  // do something
}

哪种做法更好，为什么？

Answer 1

仅此而已，但是使用Redux而不是在组件状态下存储数据的一个优点是，您将如何处理从视图层（React）到Redux的数据更新的关注点分开了； React组件应该只知道数据是否已更改，而不是如何更改。这样可以消除前端的数据层和视图层的耦合，并且在需要执行一系列操作来更新状态（例如从API提取）时非常有用。

如果您想将当前Redux操作类型公开给React组件，则必须将该操作记录在应用程序中的某个位置，因为我不认为Redux将当前操作公开给视图层。此外，这还揭示了有关Redux如何处理数据流的过多信息。

常见做法是将获取状态保存在布尔值和错误日志中，例如isFetching和fetchListError，在提取过程中更新这些值，然后将这些值传递给视图层进行显示。

Answer 2

据我了解，我们已经将应用程序与组件进行了响应，将redux应用程序与了存储进行了响应。我们用另一个库react-redux绑定了react app和redux app。 React-redux有助于在react组件中使用redux存储状态，并有助于将操作从react组件调度到redux存储。

使用Redux-thunk等异步操作库进行处理，并且根据异步操作的结果，这些库将分派操作。

问题的答案：React不知道Redux存储库中调度了哪个动作，因为它是由笨拙的中间件处理的。但是使用React-redux，React可以知道thunk中间件分派了动作之后当前Redux存储状态是什么。所以我认为您应该选择第二种选择。第一个选项可能是可行的，但它不仅需要简单地使用第一个选项，还需要大量的黑客技巧。

在React组件中使用Redux操作类型

2 个答案: