时间戳

首页 > 解决方案 > 显示来自 redux 的数据子集的最佳方式是什么？

reactjs - 显示来自 redux 的数据子集的最佳方式是什么？

问题描述

我正在使用 openWeather API。它返回这样的响应。

{
  "cod": "200",
  "message": 0,
  "cnt": 40,
  "list": [ ... ], // a list of size 40 which contains 3 hours forcast of 5 days

   "city": {
    "id": 2643743,
    "name": "London",
    "coord": {
      "lat": 51.5073,
      "lon": -0.1277
    },
    "country": "GB",
    "timezone": 0,
    "sunrise": 1578384285,
    "sunset": 1578413272
  }
}

现在在我的 UI 中，我有一个图表，显示当天的温度，我希望用户能够在几天之间切换。就像谷歌用户界面一样。 伦敦天气，谷歌搜索

我还实现了搜索，以便当用户搜索城市时，来自 api 的响应会像这样附加到我的 redux 状态。

state: {
    data : [ ... ] // array of api responses 
}

为了显示数据，需要做两件事：1）显示哪个城市数据（redux state 有一个数据数组）2）显示哪一天（api 响应有一个五天的预测数组）。最初我可以显示第一个响应和第一天（当天）。当用户想要在日期或城市之间切换时会发生什么。我应该有组件状态来处理这些信息吗？还是我应该将此信息保持在 redux 状态（为此我需要额外的操作）？

标签： reactjsreduxopenweathermap

解决方案

你说的应该是，首先你展示你的第一天和第一个城市。并且该信息存储在redux.

现在在 redux 中，你有五天的预测数组([0: {} , 1: {}, 2: {}, 3: {}, 4: {}]。当用户想要更改日期前。从周一到周三，您从 redux 获取该信息并将其绑定到组件。

当您想要第二天时，您会再次询问当天的 redux 是否在组件中使用它，如果没有，则将其放入 redux 中。

如果您需要管理该信息以以某种方式更改它（我认为您在此应用程序中不需要它），那么您可以放入数据，state否则您可以props在组件中使用它。

推荐阅读