【问题标题】:Modelling data based on a time range using redux/normalizr使用 redux/normalizr 基于时间范围对数据进行建模
【发布时间】:2019-04-28 00:26:09
【问题描述】:

我有以下来自节点后端的数据:

端点:

/user/:id?startDate=2011-10-05T14:48:00.000Z&endDate=2011-10-05T14:48:00.000Z

[
   {
      "name": "Tom",
      "createdAt": "2011-10-05T14:48:00.000Z",
      "updatedAt": "2011-10-05T14:48:00.000Z",
      ...
      "metadata": {
         "activeHours": 134.45,
         "afkHours": 134.45
      }
   },
   {
      ...
   }
]

在此数据中,日期更改之间唯一修改的是 activeHours 和 afkHours。

这些用户和调用端点的日期必须在所有页面上同步。

简单的方法是将其放入用户减速器中,例如:

{
   users: [...],
   startDate: "",
   endDate: ""
}

但是,我目前正在对这些用户使用 normalizr,并且我有一个名为 ADD_ENTITIES 的操作。拥有一个实体缩减器似乎非常有益,因为我们确实有其他实体可以很好地与这些用户进行规范化,但是我不想污染实体状态,几乎“附加”了 startDate 和 endDate 以在所有页面之间同步。

关于我的问题:

有没有更好的方法来使用 normalizr 对这个问题进行建模,您的键不仅是 ID,而且是日期范围?

或者我应该考虑把它分解成一个单独的减速器吗?

【问题讨论】:

    标签: reactjs redux normalizr


    【解决方案1】:

    不确定我是否完全理解这里的问题。

    startDateendDate 字段是否因每个用户而异?如果是,那么您可能需要在这些用户的规范化实体对象中添加这些字段。

    如果这些是所有用户的公共字段,您可以创建一个名为 userDateRange 的单独实体,其中包含这两个键。不需要标准化,因为它们是原始字段。

    {
      "entities": {
        "user": {
          "byId": {
            "user1": {},
            "user2": {}
          },
          "allIds": [
            "user1",
            "user2"
          ]
        }
      },
      "ui": {
        "userDateRange": {
          "start": "2011-10-05T14:48:00.000Z",
          "end": "2011-10-05T14:48:00.000Z"
        }
      }
    }
    

    【讨论】:

    • 我想你已经明白了!对不起,应该更清楚一点,所有用户都一样,每次我们在选择器中选择一个新的日期范围时,它必须再次调用并更新规范化的用户。但这是一个很好的呼声,唯一的问题是,我把userDateRange放在哪个reducer ddo中?
    • 使用示例状态形状更新了答案。由于选定的日期值不是来自服务器并且更像是用户特定的输入,您可以将它们保留在实体之外。在另一个名为ui 的块中说。我通常将服务器端(API 响应)和客户端(表单状态、过滤器)实体分开到不同的 reducer 以保持简单。如果您使用的是第 3 方表单库,例如 redux-form,这将自动完成。
    • 感谢您的建议!我想我唯一担心的是,通过这样做,我将开始和结束日期从机器状态中分离出来,对我来说,我认为它们非常依赖于该状态?也许我想多了这个问题,我很可能会接受这个。再次感谢!
    • 将它们分开的一个原因是,假设明天也需要相同的 dateRange 来获取其他一些实体。因此,无需为此创建单独的副本,而是可以重复使用它。同样,这是特定于应用程序的,没有完美的答案。
    • 非常真实!我会接受这一点,因为我认为你是对的 :)
    猜你喜欢
    • 2018-01-15
    • 2016-12-16
    • 1970-01-01
    • 2018-09-29
    • 2014-07-23
    • 1970-01-01
    • 2013-10-25
    • 1970-01-01
    • 2017-01-23
    相关资源
    最近更新 更多