I am not properly mutate the state of my redux store

Question

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?

Answer 1

The issue is you update the same array.

1. Keep another array to store filtered values.

const initialState = {
  //some other state data
  locationSummaries: [],
  filteredLocationSummaries: [],
}

2. Update that locationSummaries array in the ation.

const updateLocationSummaries = (state, action) => {
      state.filteredLocationSummaries = [...action.payload];
},

3. In the component use filteredLocationSummaries to render the filtered values.

Answer 2

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]);