I am creating a search functionality in my application with the help of redux. But it is not working as expected.
My initial state looks like this:
const initialState = {
//some other state data
locationSummaries: [],
}
My reducer function to update this locationSummaries array is given as:
const updateLocationSummaries = (state, action) => {
state.locationSummaries = [...action.payload];
},
My function to filter the array based on input search is given as:
const handleInputSearch = (e) => {
const { value } = e.target;
const searchText = value.toLowerCase().trim();
let filteredLocations = locationSummaries.filter((locationSummary) =>
locationSummary.locationName.toLowerCase().startsWith(searchText)
);
dispatch(updateLocationSummaries(filteredLocations));
};
Here searchText is the value that I am entering in the input text box
So in this, I am filtering the array lists when I am typing the text in the input search box.
After dispatching the filtered lists, my state is getting updated. But my locationSummaries array is eventually getting emptied. So what am I doing wrong in this scenario?
The issue is you update the same array.
const initialState = {
//some other state data
locationSummaries: [],
filteredLocationSummaries: [],
}
locationSummaries array in the ation.const updateLocationSummaries = (state, action) => {
state.filteredLocationSummaries = [...action.payload];
},
filteredLocationSummaries to render the filtered values.The better answer here is don't keep the filtered values in state.
Instead, keep the original data in Redux, keep a description of how to filter the data in the component, and do the filtering while rendering:
const items = useSelector(state => state.some.items);
const [filterText, setFilterText] = useState('');
const filteredItems = useMemo(() => {
if (!filterText) return items;
return items.filter(item => item.includes(filterText);
}, [items, filterText]);