Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

42
Vistas
I am not properly mutate the state of my redux store

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?

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The issue is you update the same array.

  1. Keep another array to store filtered values.
const initialState = {
  //some other state data
  locationSummaries: [],
  filteredLocationSummaries: [],
}
  1. Update that locationSummaries array in the ation.
const updateLocationSummaries = (state, action) => {
      state.filteredLocationSummaries = [...action.payload];
},
  1. In the component use filteredLocationSummaries to render the filtered values.
7 months ago · Juan Pablo Isaza Denunciar

0

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]);
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos