0

estoy aprendiendo redux haciendo una página de crear notas, esta haciendo click en ella puedes cambiar la importancia de la nota, no se por que pero al crear 1 nota cambia perfectamente pero al crear otra nota y tener 2 o mas notas creadas en la lista, cuando le haces click te devuelvo un objeto, en el que dentro de ese objeto tienes otro objecto con los datos y no encuentro el fallo, dejo lo que aparece en el state al darle click cuando hay mas de 1 nota creada

introducir la descripción de la imagen aquí

como pueden ver, la nota con 1 se dividio en 2 y eso hace que los datos de la nota desaparezcan en la lista

introducir la descripción de la imagen aquí

dejo mi codigo lo mas abreviado index.js

   const store = createStore(
 noteReducer,
 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const Store = () => {
 const state = store.getState();

 const addNote = (e) => {
   e.preventDefault();
   const { target } = e;
   const content = target.note.value;
   target.note.value = '';
   store.dispatch(createNote(content));
 };

 const toggleImportant = (id) => {
   store.dispatch(actionToggleImportant(id));
 };

 return (
   <>
     <form onSubmit={addNote}>
       <input name="note" />
       <button>add</button>
     </form>
     <ul>
       <li>Aqui empieza la lista</li>
       {state.map(note => {
         return <li key={note.id} onClick={() => toggleImportant(note.id)}>
             {note.content}
            <strong>
               {note.important ? "is important" : "not important"}
             </strong>
           </li>
       })}
     </ul>
   </>
 );

};

y este es mi reducer

export const noteReducer = (state = [], action) => {
  switch (action.type) {
    case "@notes/created":
      console.log("nota creada");
      return [...state, action.payload];
      break;

    case "@notes/toggle_important":
      console.log("cambiando importancia");
      const { id } = action.payload;
      return state.map((note) => {
        if (note.id == id) {
          return {
            ...note,
            important: !note.important,
          };
        }else {
          return state;
        }
        
      });

    default:
      return state;
      break;
  }
};

export const generateID = () => {
  return Math.floor(Math.random() * 99999) + 1;
};

export const createNote = (content) => {
  return {
    type: "@notes/created",
    payload: {
      content: content,
      important: false,
      id: generateID(),
    },
  };
};

export const actionToggleImportant = (id) => {
  return {
    type: "@notes/toggle_important",
    payload: {
      id: id
    }
  };
};
1
  • Ok entonces cada vez que das click en add the aparece este objeto el cual parece ser un array de objetos que contiene las notas, ¿Puedes confirmar?
    – g.4
    Commented el 7 nov. 2022 a las 20:43

1 respuesta 1

1

EL problem esta en que estas retornando el state dentro del map cuando el id no es el mismo. El código tuyo es este

 return state.map((note) => {
        if (note.id == id) {
          return {
            ...note,
            important: !note.important,
          };
        }else {
          return state;
        }
        
      });

Cuando debería de ser

 return state.map((note) => {
        if (note.id == id) {
          return {
            ...note,
            important: !note.important,
          };
        } else {
          return note;
        }
        
      });

El return del else es la diferencia

1
  • Muchas gracias, vaya error mas tontin
    – FranyxD
    Commented el 8 nov. 2022 a las 9:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.