acción de edición no actualiza el estado redux

He creado una lista de artículos, puedo añadir otro, borrar y, espero que me gustaría que cada uno editara. Tan pronto como haga clic en editar botón aparece el modal, pero cuando guardo cambios, nada sucede. Considero que el script del reductor es correcto.

Caso

 EDIT_ARTICLE: {
            const artToEdit = state.articles.find(i => i.id == action.payload) 
            const articles = [...state.articles]
            articles[artToEdit] =  { 
                id: action.payload.id, 
                title: action.payload.title, 
                content: action.payload.content
             }

            return { 
                ...state,
                articles
            } 
        }

es un componente donde se muestra una lista de artículos:

const mapStateToProps = state => {
    return { articles: state.articles }
}

const List = ({ articles,  deleteArticle, editArticle}) => {
  
    const [show, setShow] = useState(false);
    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')
    const handleClose = (e) => {
        e.preventDefault()
        setShow(false)
    } 
    const handleSubmit = () => {
     
        setShow(false)
        setTitle('')
        setContent('')
        editArticle({ title, content})
    }
    const handleShow = () => setShow(true);

  

    const handleChange = (e) => {
        e.preventDefault()
        setTitle(e.target.value)
    }
    const handleChange2 = (e) => {
        e.preventDefault()
        setContent(e.target.value)
    }

    return(
        
            
List of articles

            
    
                { articles.map(el => (
                    <>
                    
  • 
                        
    
                            
    {el.title}
    
                            {el.content}
                        
    
                    
    
                    
                    
                    
    
                    
    • 
                    
                    
                    Edit article
                    
                    
                    
    
                        
                            Title
                            
                        
    
                        
                            Content
                            
                        
                        
                       
                        
    
                        
                    
                    
                    
                    
                    
                
                ))}
            

            

            
        
    )
}

const mapDispatchToProps = { editArticle, deleteArticle };

La consola está vacía, no hay problemas, pero el estado actualizado no está rindiendo.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codecraftsman

3 Respuestas:

  • Parece que tu carga es title y content:

            editArticle({ title, content})

    , pero el reductor espera que la carga útil sea un id Aquí:

    const artToEdit = state.articles.find(i => i.id == action.payload)

    y un artículo aquí:

                articles[artToEdit] =  { 
                id: action.payload.id, 
                title: action.payload.title, 
                content: action.payload.content
             }

    Tienes que asegurarte de que tu carga es correcta.

    Respondida el Dec 18, 2020 a las 11:15 - por syntaxsavvy

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando probablemente se deba a cómo estás manejando la edición de un artículo en tu componente 'List'.

    Aquí hay algunas sugerencias para corregir el problema:

    • En tu `handleSubmit` function en el componente `List`, estás llamando a `editArticle({ title, content})`. Sin embargo, parece que falta pasar el `id` del artículo que se está editando. Deberías pasar el `id` junto con el `title` y `content` al llamar a `editArticle` para que el reductor pueda identificar qué artículo se debe editar.
    • En tu propuesta del script del reductor, en la acción `EDIT_ARTICLE`, estás buscando un artículo para editar por el `id`. Sin embargo, cuando actualizas el artículo en el array de artículos, estás usando `articles[artToEdit]`. En este punto, `artToEdit` es una referencia al artículo, no un índice. Por lo tanto, deberías obtener el índice del artículo para actualizarlo de la siguiente manera:
    javascript
const index = state.articles.findIndex(i => i.id === action.payload.id);
articles[index] = { 
    id: action.payload.id, 
    title: action.payload.title, 
    content: action.payload.content
};
    • También, asegúrate de que `editArticle` está conectado al store de Redux correctamente y que estás pasando las acciones correctamente a través de `mapDispatchToProps`.

    Con estas correcciones en mente, deberías poder actualizar el estado de Redux correctamente una vez que se guarden los cambios en un artículo editado. ¡Espero que esto te ayude a solucionar tu problema! Si necesitas más ayuda, ¡estaré aquí para asistirte! 😊

    Respondida el Dec 19, 2020 a las 11:18 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Posibles problemas y soluciones:

    1. Acción de envío incorrecta:

    Verifica que la acción de edición se envíe correctamente en el componente List. Debes tener algo como:

    
const handleEdit = (id) => {
  dispatch(editArticle({ id, title, content }));
};

    2. Reducidor incorrecto:

    Revisa cuidadosamente el reductor EDIT_ARTICLE. El índice articles[artToEdit] debe apuntar al artículo correcto para ser editado. Asegúrate de que el nuevo objeto de artículo tenga todas las propiedades necesarias, incluyendo el id.

    3. Estado inicial incorrecto:

    Verifica que el estado inicial de Redux contenga una lista válida de artículos.

    4. Falta de actualización del estado:

    Faltan las llamadas setState en el componente List después de enviar la acción de edición.

    5. Llaves de renderizado únicas:

    Asegúrate de que los elementos de la lista tengan claves de renderizado únicas para que React pueda identificar correctamente los cambios.

    6. Error de consola:

    Incluso si la consola está vacía, verifica cuidadosamente si hay errores ocultos que puedan estar impidiendo la actualización del estado.

    7. Componente no conectado:

    Asegúrate de que el componente List esté conectado a Redux y reciba los accesorios de Redux.

    Pasos adicionales de depuración:

    Utiliza console.log para rastrear el flujo de datos a través del reductor y el componente. Usa React DevTools para inspeccionar el estado de Redux y verificar si se está actualizando. * Si todo lo demás falla, intenta restablecer tu estado de Redux y volver a cargar la aplicación.

    Respondida el Dec 19, 2020 a las 11:25 - por Gemini

    Votos positivos: 0 | Votos negativos: 0