栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

是的,正确地在多个商店中使用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)
并且还可以在视图层中检索特定卡的ID。因此,我可以有一个
deleteCard(id)
响应动作而调用的方法,因为我知道视图中的id。

在卡存储中,您将拥有

getCardsByColumn(columnID)
,这是卡对象上的简单映射,这将产生卡阵列,可用于呈现列的内容。


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

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

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

因此,您有以下三个动作:

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

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

作为对成功/错误的响应,您的商店再次接收到客户端ID,然后将记录修改为具有真实ID的已确认记录,或者回滚该记录。您还希望围绕该错误创建一个良好的UX,例如让用户重试。

示例代码:

// Within MyAppActionscardAdded: 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 WebAPIUtilsgetRequestFunction: 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 CardStoreswitch (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:    // ...}

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/382078.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号