Hice esta aplicación de lista de tareas pendientes usando redux con la ayuda de un tutorial con el fin de aprender la arquitectura Redux. por lo tanto, la casilla de verificación debería funcionar para cada tarea individual agregada, pero al cambiar obtengo que todos los valores de las casillas se vuelven verdaderos cuando pensé que no estaba asignando el estado. pero luego, si observa el registrador en la consola, verá que lo tengo funcionando, solo que no puedo mostrar la verificación correctamente. Puedes encontrar el código completo aquí .
este es el componente Tarea
const Todo = ({ todo , idx , deleteTodo , editTodo,selected,text,check,checkTodo }) => { return ( <div style={{ display: 'flex', flexDirection: 'flex-start', justifyContent: 'space-evenly', border: '1px solid white', padding: '5px', width: '200px', cursor: 'pointer' }} > <input style={{ width: '1rem', height: '0.8rem', margin: '0', padding: '0' }} type="checkbox" checked={check} onChange={() => checkTodo(idx)} /> <div onClick={() => editTodo(idx)} > { selected === idx ? text : todo } </div> <div style={{ cursor: 'pointer' }} onClick={() => deleteTodo(idx)}>x</div> </div> ) } Aquí está la action.reducer
export const checkTodo = key => ({ type: "CHECK_TODO", payload: key })y esta es la caja del interruptor reductor (la parte de la casilla de verificación)
case 'CHECK_TODO': const todos5 = state.todos.map((todo, i) => { if (i == action.payload) { return { ...state, check: !todo.check ,text: todo} } return todo }) setPersist(todos5) return { ...state,todos5 }