Question

我正在尝试确定该项目是否需要redux。我有一个JS项目，它使用react显示通过API提取的结果表。

API生成用户的JSON数组，例如（如下），每10秒由我的React页面获取

[{
  "id": 1,
  "email": "bdudson0@arstechnica.com",
  "online": false,
  "paid": true
}, {
  "id": 2,
  "email": "srodear1@seattletimes.com",
  "online": true,
  "paid": true
}, {
  "id": 3,
  "email": "mwillmont2@nytimes.com",
  "online": true,
  "paid": false
}]

此JSON数组一旦获取就可以随时更改。因此，例如，它可以显示一个额外的用户，显示一个已删除的用户，将一个用户的在线状态更改为true或false等。

由于在redux的上下文中，您有一些操作将被分派到商店，从而改变了商店；这种情况（似乎是相反的）仅使用一个操作，即获取JSON操作。另外，我认为商店应该是每次获取的JSON数组。如何检测对商店的更改，以便可以执行基于商店的操作。

因此，如果获取了JSON并且我的react应用将JSON作为初始状态/存储，然后再次获取了JSON，则存储将被更新为新状态。我将需要能够检测到新旧状态之间的所有变化，并根据特定的变化执行动画。

例如对状态进行4种更改可能会产生以下动作，这些动作我将通过react进行动画处理：

USER_ADDED
USER_ONLINE_STATUS_CHANGED
USER_PAYMENT_STATUS_CHANGED
USER_REMOVED

redux适合吗？我将使用更大的数组，并且需要知道一种方便的方法来实现此目的。

Answer 1

“我正在尝试确定该项目是否需要redux。我有一个JS项目，该项目使用react来显示通过API提取的结果表。”

仅当您需要状态（在本例中为JSON数组）在整个React应用程序中持久存在时，才执行Redux。否则，只需处理组件内的API调用和更改。切换组件时，您会丢失状态，因为状态在组件之间不是持久的。这就是Redux所解决的。

“我将需要能够检测新状态和旧状态之间的所有变化，并根据特定的变化执行动画。”

Redux将能够同时使用动作创建者和简化器来处理状态更新。动作创建者将调用API，并将响应发送给reduce。然后，reduce会从状态中更新，更改或删除项目。

“ redux是否适合此操作？我将使用更大的数组，并且需要知道一种方便的方法来实现这一目标。”

听起来确实Redux将对这个项目有好处。仅当您需要整个React应用程序的状态时才使用它。

Answer 2

Redux不会帮助您自动区分这两种状态。基本上，您将需要手动创建一个函数来执行此操作。

一种简单的方法是将JSON数组转换为es6 set

const set1 = new Set(OLD_STATE);
const set2 = new Set(NEW_STATE);

然后您可以调用difference()来获取这两种状态之间的更改：

set1.difference(set2)

或者，您可以使用redux-diff-logger或redux-dev-tools在控制台中输出差异。

检测React / Redux存储中的哪些更改，并根据特定更改执行操作

2 个答案: