如何在redux-store-redux中清除搜索过滤器功能后返回原始状态

Question

我有一个搜索和筛选功能，我想实现它，用户可以通过它搜索项目，这些项目将以平面列表的形式返回，当用户清除搜索框或搜索框为空时，我希望返回初始状态。

我试过这个：该函数确实过滤了整个存储，但当我清除它时，原始状态项就不在了。返回的是搜索值

search: (state, { payload }) => {
const itemsToFilter = state.filter((item) => {
let itemLowerCase = item.item_description.toLowerCase();
let searchItemToLowerCase = payload.item_description.toLowerCase();
return itemLowerCase.indexOf(searchItemToLowerCase) > -1;
});
if (payload.item_description.length !== 0) {
return itemsToFilter;
} else {
return state;
}
},

这是我的组件功能

import {useDispatch, useSelector} from 'react-redux';
const [searchValue, setSearchValue] = useState("");

const items = useSelector(state => state.items)
const dispatch = useDispatch()
const searchItems = (e) => {
const text = e.nativeEvent.text;
setSearchValue(text);
dispatch(
searchItemAction({
item_description: searchValue,
})
);
};
<TextInput value={searchValue} onChange={searchItems} />

Answer 1

首先，useState()是异步的，因此您的调度使用旧字符串。

const searchItems = (e) => {
const text = e.nativeEvent.text;
setSearchValue(text); // Will be updated async
dispatch(
searchItemAction({
item_description: searchValue, //searchValue will still be the old search value
})
);
};

简单的解决方案是使用text变量：

const searchItems = (e) => {
const text = e.nativeEvent.text;
setSearchValue(text);
dispatch(
searchItemAction({
item_description: text,
})
);
};

此外，您将原始数据存储在哪里？您应该创建一个选择器，这样就可以了。

我认为最好的解决方案是只在这个组件中使用选择器(如果你在其他地方不需要它的话(：

const [searchValue, setSearchValue] = useState("");
const items = useSelector(state => {
if(searchValue.length === 0) {
return state.items;
}
return state.items.filter((item) => {
let itemLowerCase = item.item_description.toLowerCase();
let searchItemToLowerCase = searchValue.toLowerCase();
return itemLowerCase.indexOf(searchItemToLowerCase) > -1;
});
}
const searchItems = (e) => {
const text = e.nativeEvent.text;
setSearchValue(text);
};

否则，您需要将搜索字符串存储为redux，并使用存储的字符串在选择器中进行筛选。