Question

我正在寻找过滤原始状态的“正确”方法。

国家

{
  searchText: '',
  items: [
    {name: 'Tom'},
    {name: 'Larry'},
    {name: 'Harry'}
  ]
}

减速机

    const filterText = action.text.toLowerCase();
    const filteredResults = state.items.filter((item) => {
      return item.name.toLowerCase().indexOf(filterText.toLowerCase()) > -1
    })

    const newState = { items: filteredResults , searchText: action.text }
    return newState

容器

return this.props.people.items.map((person) => {
     return(
       <li
         key={person.name}
         onClick={() => this.props.selectPerson(person)}
        >{person.name}</li>
     )
   })

但是，如果我清除了文本输入，我显然已经使用.filter（）删除了这些项目。我基本上需要在按键上搜索所有结果，但不能从原始状态中删除。

我有一个解决方案，并在商店中存储一个额外的数据，然后将结果添加到items数组中。

initialItems: [...],
items: [...]

然而如上所述，我正在寻找过滤结果的正确方法，我不确定是不是这样。

Answer 1

您的解决方案只是解决方案之一。 IMO没有“正确”的方法，因为每个实现都有其优点和缺点：）

然而，我想到的一个“更干净”的解决方案最终会产生更好的效果，我会在selector中使用mapStateToProps来根据searchText过滤掉这些项目。实际上，只需将代码从reducer移动到selector。

const filterItems = state =>
  state.items.filter(item =>
    item.name.toLowerCase().indexOf(state.searchText.toLowerCase())
  );

const mapStateToProps = state => ({
  filteredItems: filterItems(state)
});

export default connect(mapStateToProps)(YourComponent);

使用reselect - https://github.com/reactjs/reselect

，您可以做得更好

使用Redux过滤和保留原始结果的正确方法是什么

1 个答案: