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

Question

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

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

[{
  "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 数组在获取后随时可能更改。例如，它可以显示一个额外的用户，显示一个已删除的用户，将一个用户的在线状态更改为真或假等等。

因为在 redux 的上下文中，你有一些动作被分派到一个改变 store 的 store；这种情况（似乎是相反的）仅使用一个操作，即获取 JSON 操作。另外，我相信 store 应该是每次获取的 JSON 数组。如何检测对商店的更改，以便我可以根据它执行操作。

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

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

1. USER_ADDED
2. USER_ONLINE_STATUS_CHANGED
3. USER_PAYMENT_STATUS_CHANGED
4. USER_REMOVED

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

Answer 1

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

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

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

Redux 将能够使用 action creators 和 reducer 来处理更新状态。动作创建者将调用 API 并将响应发送到减速器。然后，reducer 将更新、更改或删除状态中的项目。

“redux 适合这个吗？我将使用更大的数组，需要知道一种方便的方法来实现这一点。”

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

Answer 2

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

一个简单的方法是将你的 JSON 数组转换为 es6 设置

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

那么你可以调用difference()来获取这两种状态之间的变化：

set1.difference(set2)

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