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

时间:2018-03-08 17:05:22

标签: redux

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

国家

{
  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: [...]

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

1 个答案:

答案 0 :(得分:0)

您的解决方案只是解决方案之一。 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

,您可以做得更好