No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Conclusiones

22/22
Recursos

Aportes 7

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

AMÉ. ESTE. CURSO. lo pondré en práctica ya mismo en un proyecto que estoy haciendo para mi portafolio💚💚💚

Que importante es conocer el flujo de redux en versiones anteriores o “the old way”, he aplicado redux toolkit en trabajo pero nunca la manera anterior a este. Muchas gracias por el curso!

estuvo buenisimo el curso

Así quedó mi sitio con la función de buscar

https://eduardxmartinez.github.io/pokedux/

Muchas gracias por el curso, excelente!

Para el buscador modifiqué el initialState agregándole un campo llamado pokemonsFiltered. También modifiqué el dataSlice, donde en setPokemons se cargan ambos campos y en setFavorite se lee pokemonsFiltered. Y agregué la función setFiltered

const initialState = {
  pokemons: [],
  pokemonsFiltered: [],
};

/*..... */

export const dataSlice = createSlice({
  name: "data",
  initialState,
  reducers: {
    setPokemons: (state, action) => {
      state.pokemons = action.payload;
      state.pokemonsFiltered = action.payload;
    },
    setFavorite: (state, action) => {
      const currentPokemonIndex = state.pokemonsFiltered.findIndex(
        (pokemon) => pokemon.id === action.payload.pokemonId
      );
      if (currentPokemonIndex >= 0) {
        const isFavorite = state.pokemonsFiltered[currentPokemonIndex].favorite;
        state.pokemonsFiltered[currentPokemonIndex].favorite = !isFavorite;
      }
    },
    setFilter: (state, action) => {
        const pokemonsFiltered = state
            .pokemons
            .filter( pokemon => pokemon.name.includes( action.payload ) )
        state.pokemonsFiltered = pokemonsFiltered;
    }
  },
});

El componente App lee pokemonsFiltered

const pokemons = useSelector((state) => state.data.pokemonsFiltered, shallowEqual);

Finalmente, el componente Searcher dispara la función setFilter para modificar la lista.

export const Searcher = () => {

  const dispatch = useDispatch();

  const handleOnChange = (e) => {
    dispatch(setFilter(e.target.value));
  }

  return <Input.Search 
    placeholder="Buscar..." 
    onChange={handleOnChange}
    style={{marginBottom: '10px'}} />
}

Dejo mi solucion con estilos propios y el buscador funcional. Lo hice creando un nuevo metodo en el slice de data mas otro estado que verifica el estado del imput y en base a eso actualiza la UI en caso que no encuentre ningun resultado

web deployed: https://pokedux-delegadodev.netlify.app/
codigo: https://github.com/Delegado007/pokedux/tree/styles_component