我應該在我的通量商店裏過濾嗎？

這實質上是存儲/視圖中同步與異步操作的最佳實踐問題。我應該在我的通量商店裏過濾嗎？

我在嘗試爲項目列表構建一個實時搜索字段。

在我當前的實現中，我從我的服務器請求所有項目並將它們保存到商店。當用戶在搜索字段中輸入字符時，視圖使用.filter（）本機函數過濾項目。不幸的是，這會在下一個呈現（包括在搜索字段中顯示按鍵字符的字符）之前導致一些延遲（由於項目的數量和過濾器的複雜性）。

我的問題是：我是否應該調用一個操作來初始化商店中商品的過濾，並在商店完成時更新？然後，在此期間，我將能夠在過濾結果進入之前呈現按鍵字符。

是否有一種直觀的方式來防止/中止以前的不完整請求，以便在新進程進行過濾時進行過濾？

編輯：

這裏的新的實現：

組件/視圖

_onChange() { 
    this.setState({ 
     items: ItemStore.getFilteredItems() 
    }) 
}, 
handleSearchChange(event) { 
    this.setState({ 
     searchText: event.target.value, 
    }) 

    ItemActions.filterItems(event.target.value) 
}, 
render() {...}

行動

filterItems(searchTerm) { 
    dispatcher.dispatch({ 
     type: FILTER_ITEMS, 
     searchTerm: searchTerm, 
    }); 
}

商店

var _store = { 
    items: [], 
    filteredItems: [] 
} 
var filter = function (searchTerm) {...} 
... 

Dispatcher.register(function (action) { 
    switch (action.type) { 
     case FILTER_ITEMS: 
      filter(action.searchTerm) 
      ItemStore.emit(CHANGE_EVENT) 
      break 
    } 
})

編輯2：

我已經結束了添加一個setTimeout時，在行動內調度，使其異步。我還將項目列表和搜索分成兩個不同的組件，以便重新呈現列表所需的時間不會影響/阻止搜索字段組件。

來源

2016-07-07 Kevin Lee

過濾不應阻止搜索字段中的按鍵字符。基本上，因爲過濾是一項繁重的操作，所以將它視爲異步HTTP事件。

下面是你應該在焊劑世界做：

找回服務器上的所有項目，並將它們保存到存儲
每次在搜索欄中鍵入時，設置狀態爲輸入字段和組件應立即重新渲染（https://facebook.github.io/react/docs/forms.html#controlled-components）
在設置文本狀態的同時，還要分派動作來過濾結果。過濾後的結果應作爲單獨的實體存儲在商店中，並作爲此操作的結果進行更新。
當商店更新篩選的結果，您的組件應該有他們作爲一個prop並自動重新渲染（獨立的按鍵事件）

來源

2016-07-07 18:51:42 mtaube

完美。我同意這是更好的模式。請在編輯中查看我的代碼。但是，我的代碼仍然是同步的，因爲動作會立即分派searchTerm - 我的第一個呈現（對於setState）在商店收到分派的操作並處理過濾之後發生。有任何想法嗎？ –

好的模板也是使用去抖功能進行服務器調用。就像lodash提供的一樣。 https://lodash.com/docs#debounce –

我應該在我的通量商店裏過濾嗎？

回答

相關問題