我应该在助焊剂商店中过滤吗？

Question

这本质上是存储/视图中同步与异步操作的最佳实践问题。

我正在尝试为项目列表构建一个实时搜索字段。

在我当前的实现中，我从服务器请求所有项目并将它们保存到商店。当用户在搜索字段中输入字符时，视图会使用 .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 以使其异步。我还将项目列表和搜索拆分为两个不同的组件，以便重新渲染列表所需的时间不会影响/阻止搜索字段组件。

Answer 1

过滤不应阻止搜索字段中的按键字符。基本上，因为过滤是一项繁重的操作，所以将其视为异步 HTTP 事件。

这是您在 Flux 世界中应该做的事情：

• 从服务器检索所有项目并将它们保存到商店
• 每次在搜索字段中输入，设置输入字段的状态，组件应立即重新呈现 (https://facebook.github.io/react/docs/forms.html#controlled-components)
• 在设置文本状态的同时，还分派一个动作来过滤结果。过滤后的结果应作为单独的实体放入存储中，并作为此操作的结果进行更新。
• 当商店更新过滤结果时，您的组件应该将它们作为prop 并自动重新呈现（独立于按键事件）