时间戳

首页 > 解决方案 > 在 React 组件中使用 redux 操作类型

reactjs - 在 React 组件中使用 redux 操作类型

问题描述

假设我在下面有这段代码：

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;
}

在此之前，我已经设置了一些动作创建器（带有用于异步请求的 thunk 中间件）。所以流程要么是GET_LIST > GET_LIST_SUCCESSOR GET_LIST > GET_LIST_ERROR。

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

自己使用操作类型是一种好习惯，还是应该只使用商店状态来满足我的条件？在这个例子中，我的商店有一个error属性，我可以用它来检测是否有错误。

所以它是（使用动作类型）：

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

或（使用存储状态）

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

哪个是更好的做法，为什么？

标签： reactjsreduxreact-redux

解决方案

只是我的看法，但是使用 Redux 相对于在组件状态中存储数据的一个优势是，您可以将如何处理数据更新的问题从视图层（React）分离到 Redux；React 组件应该只知道数据是否已更改，而不是如何更改。这将前端的数据层和视图层解耦，当您需要执行一系列操作来更新状态（例如从 API 获取）时很有帮助。

如果你想将当前的 Redux 动作类型暴露给 React 组件，你必须在你的应用程序的某处记录动作，因为我不认为 Redux 将当前动作暴露给视图层。此外，这也揭示了 Redux 如何处理数据流的太多信息。

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

推荐阅读