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

Question

这本质上是 store/view 中同步与异步操作的最佳实践问题。

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

在我当前的实现中，我从我的服务器请求所有项目并将它们保存到商店。当用户在搜索字段中输入字符时，视图会使用 .filter() 本机函数过滤项目。不幸的是，这会在下一次渲染（包括搜索字段中显示的按键字符）之前造成一些延迟（由于项目的数量和过滤器的复杂性）。

我的问题是：我是否应该调用一个操作来初始化商店中项目的过滤，并在商店完成时更新？然后，与此同时，我将能够在过滤结果出现之前渲染按键字符。

有没有一种直观的方法可以prevent/abort在新请求进来时过滤以前不完整的请求？

编辑：

这是新的实现：

component/view

_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 以使其异步。我还将项目列表和搜索分成两个不同的部分，以便重新呈现列表所需的时间不会 affect/block 搜索字段部分。

Answer 1

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

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

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

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

Should I filter within my flux stores?

flux