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）
在设置文本状态的同时，还会调度操作以过滤结果。过滤后的结果应作为单独的实体存储在商店中，并作为此操作的结果进行更新。
当商店更新过滤后的结果时，您的组件应将其作为eqtype并自动重新呈现（独立于按键事件）

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

1 个答案: