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
como pueden ver, la nota con 1 se dividio en 2 y eso hace que los datos de la nota desaparezcan en la lista
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
}
};
};