es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo filtrar una lista con el hook useReducer en React?

19 Jul, 2023 Programación

Necesito saber cómo puedo filtrar un objeto con la función useReducer en forma de lista. Quiero que funcione según el progreso del objeto. Soy nuevo, ¿necesito también hacer un mapeo?

const data = {
  title: "Título",
  lessons: [
    {
      title: "Introducción",
      data: Lesson1,
      isComplete: false,
      progress: 0,
    },
    {
      title: "Sección",
      data: Lesson2,
      isComplete: false,
      progress: 10,
    },
    {
      title: "Revisión",
      data: Lesson3,
      isComplete: false,
      progress: 0,
    },
  ],
};

const [state, dispatch] = useReducer(reducer, data.lessons);

function reducer(state, action) {
    switch (action.type) {
      case "all":
        return { ...state.filter((filterlesson) => filterlesson >= 0) };
      case "viewed":
        return { ...state.filter((filterlesson) => filterlesson != 0) };
      case "notviewed":
        return { ...state.filter((filterlesson) => filterlesson == 0) };
      default:
        return state;
    }
}

const Filter = () => {
    return (
        <>
            <div classname="{styles.filter}">
                <button onclick="{()" ==""> dispatch({ type: "all" })}>Todos</button>
                <button onclick="{()" ==""> dispatch({ type: "viewed" })}>Vistos</button>
                <button onclick="{()" ==""> dispatch({ type: "notviewed" })}>No vistos</button>
            </div>

    );
};

return (
    <>
        <filter></filter>
        {state}

);

Lo intenté antes, pero creo que debería usar useReducer:

{data.lessons
   .filter((l) => l.progress === 0)
   .map((filterLesson, i) => (
       <li key="{i}"></li>
   ))}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para filtrar las lecciones según su progreso utilizando la función useReducer, primero puedes definir una función reductora que tome el estado actual y una acción, y luego devuelva un nuevo estado basado en el tipo de acción. En este caso, la función reductora puede filtrar el array de lecciones según su nivel de progreso utilizando el método filter().

    Aquí tienes un ejemplo de código:

    const [state, dispatch] = useReducer(reducer, data.lessons);

function reducer(state, action) {
  switch (action.type) {
    case "all":
      return data.lessons;
    case "viewed":
      return state.filter((lesson) => lesson.progress > 0);
    case "notviewed":
      return state.filter((lesson) => lesson.progress === 0);
    default:
      return state;
  }
}

const Filter = () => {
  return (
    <>
      <div classname="{styles.filter}">
        <button onclick="{()" ==""> dispatch({ type: "all" })}>Todos</button>
        <button onclick="{()" ==""> dispatch({ type: "viewed" })}>Vistos</button>
        <button onclick="{()" ==""> dispatch({ type: "notviewed" })}>No Vistos</button>
      </div>

  );
};

return (
  <fragment>
    <filter></filter>
    <ul>
      {state.map((lesson, i) => (
        <li key="{i}">{lesson.title}</li>
      ))}
    </ul>
  </fragment>
);

    En este código, la función reducer recibe el estado actual y una acción como parámetros. El parámetro action es un objeto que tiene una propiedad type que indica el tipo de acción a realizar. Basándose en este type, la función reducer filtra el array de lecciones del estado y devuelve un nuevo estado con las lecciones filtradas.

    El componente Filter renderiza tres botones que envían acciones a la función reducer cuando se hacen clic en ellos. El elemento ul renderiza una lista de lecciones basada en el estado filtrado.

    Ten en cuenta que no necesitas mapear manualmente las lecciones cuando utilizas la función useReducer. La variable state devuelta por useReducer ya contiene las lecciones filtradas.

Comments are closed.