我正在寻找过滤原始状态的“正确”方法。
国家
{
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: [...]
然而如上所述,我正在寻找过滤结果的正确方法,我不确定是不是这样。
答案 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