reactjs - 如何处理 Flux 商店中的一对多关系

Question

我刚刚开始使用 Flux(现在使用 redux)，并且想知道应该如何处理关系。
例如，我们可以使用 Trello，它的看板和包含卡片的列。

一种方法是为板提供一个存储/ reducer ，并将所有数据存储在其中，但这意味着一些存储非常庞大，因为它们还必须包含列和卡的所有操作。

我见过的另一种方法是将嵌套资源分离到例如 BoardStore、ColumnStore 和 CardStore 中，并使用它们的 id 作为引用。

这是一个让我有点困惑的示例:您可以有一个名为 addCard 的操作创建器，它向服务器发出请求以创建包含所有数据的卡片。如果您正在进行乐观更新，您之前会在您的商店之一创建一个卡片对象，但在您返回请求之前您无法知道它的 ID。

简而言之:

• 触发 addCard
• addCard 发出请求，同时您返回 ADD_CARD_TEMP 类型的操作
• 您收到请求并返回 ADD_CARD 类型的操作，其中 store/reducer 会更改 id。

有没有推荐的方法来处理这种情况？嵌套存储/ reducer 对我来说有点傻，但否则你最终会得到非常复杂的存储，所以它看起来确实是一个妥协。

Answer 1

是的，像关系数据库一样跨多个商店使用 id 是正确的方法。

在您的示例中，假设您希望乐观地将一张新卡放入特定列中，并且一张卡只能位于一列中(一列对应多张卡)。

CardStore 中的卡片可能如下所示:

_cards: {
  'CARD_1': {
    id: 'CARD_1',
    columnID: 'COLUMN_3',
    title: 'Go to sleep',
    text: 'Be healthy and go to sleep on time.',
  },
  'CARD_2': {
    id: 'CARD_2',
    columnID: 'COLUMN_3',
    title: 'Eat green vegetables',
    text: 'They taste better with onions.',
  },
}

请注意，我可以通过 id 引用卡片，也可以在对象中检索 id。这使我能够拥有像 getCard(id) 这样的方法，并且还能够检索 View 层中特定卡片的 id。因此，我可以调用一个方法 deleteCard(id) 来响应操作，因为我知道 View 中的 id。

在卡片存储中，您将拥有 getCardsByColumn(columnID)，这将是卡片对象上的简单映射，这将生成一个可用于呈现内容的卡片数组列的。

<小时/>

关于乐观更新的机制，以及 ids 的使用如何影响它:

您可以使用在同一闭包中建立的客户端 ID 来处理 XHR 响应，并在响应成功返回时清除客户端 ID，或者在错误时回滚。闭包允许您保留客户端 ID，直到响应返回。

许多人会创建一个 WebAPIUtils 模块，其中包含与保留客户端 ID 和请求/响应的闭包相关的所有方法。 Action 创建者(或商店)可以调用此WebAPIUtils模块来发起请求。

所以你有三个行动:

1. 发起请求
2. 处理成功
3. 处理响应

为了响应发起请求的操作，您的商店会收到客户端 ID 并创建记录。

为了响应成功/错误，您的商店再次接收客户端 ID，并将记录修改为具有真实 ID 的已确认记录，或者回滚记录。您还希望围绕该错误创建良好的用户体验，例如让您的用户重试。

示例代码:

// Within MyAppActions
cardAdded: function(columnID, title, text) {
  var clientID = this.createUUID();
  MyDispatcher.dispatch({
    type: MyAppActions.types.CARD_ADDED,
    id: clientID,
    columnID: columnID,
    title: title,
    text: text,
  });
  WebAPIUtils.getRequestFunction(clientID, "http://example.com", {
    columnID: columnID,
    title: title,
    text: text,
  })(); 
},

// Within WebAPIUtils
getRequestFunction: function(clientID, uri, data) {
  var xhrOptions = {
    uri: uri,
    data: data,
    success: function(response) {
      MyAppActions.requestSucceeded(clientID, response);
    },
    error: function(error) {
      MyAppActions.requestErrored(clientID, error);
    },
  };
  return function() {
    post(xhrOptions);
  };
},

// Within CardStore
switch (action.type) {

  case MyAppActions.types.CARD_ADDED:
    this._cards[action.id] = {
      id: action.id,
      title: action.title,
      text: action.text,
      columnID: action.columnID,
    });
    this._emitChange();
    break;

  case MyAppActions.types.REQUEST_SUCCEEDED:
    var tempCard = this._cards[action.clientID];
    this._cards[action.id] = {
      id: action.id,
      columnID: tempCard.columnID,
      title: tempCard.title,
      text: tempCard.text,
    });
    delete this._cards[action.clientID];
    break;

  case MyAppActions.types.REQUEST_ERRORED:
    // ...
}

请不要太关注名称的细节和此实现的细节(可能存在拼写错误或其他错误)。这只是解释该模式的示例代码。