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.

Los cambios de estado de Redux, pero el componente no se está volviendo a renderizar.

06 Aug, 2023 Programación

Mi problema es que mi estado de redux se está actualizando (puedo verlo en la herramienta de desarrollo de redux) pero mi componente no se actualiza, no muestra el último valor de mi array initialState.userWeight.

Aquí está cómo se ve mi reductor:

case 'NEWWEIGHT':
    const weight = action.payload.weight
    const date = action.payload.date
    state.userWeight = [...state.userWeight, {weight: weight, date: date}]
    return {...state}

Aquí está mi estado inicial:

const initialState = {
    userName: '',
    userSize: 0,
    userWeight: [],
    userDate: '',
}

Así es como se ve mi componente:

const userWeightRedux = useSelector(state => state.userInfo.userWeight[state.userInfo.userWeight.length - 1].weight)

console.log(userWeightRedux)

//...
<text style="{styles.user}">{userWeightRedux}</text>

Entonces, console.log(userWeightRedux) no cambia.
Soy nuevo en react, redux y no entiendo completamente la sintaxis de propagación, tal vez el problema esté aquí pero no encontré nada, espero que puedas ayudarme :).

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está en cómo estás actualizando el estado en tu reductor. Cuando actualizas el estado en Redux, es importante crear una nueva copia del estado en lugar de modificar el estado original.

    En tu caso, estás modificando directamente el estado al actualizar el array userWeight con la sintaxis de propagación. Sin embargo, esto no crea una nueva copia del array userWeight, solo crea una nueva referencia al mismo array.

    Para solucionar esto, debes crear una nueva copia del array cada vez que actualices userWeight. Puedes hacer esto utilizando la sintaxis de propagación para crear una nueva instancia de array de esta manera:

    case 'NEWWEIGHT':
  const weight = action.payload.weight
  const date = action.payload.date
  const updatedUserWeight = [...state.userWeight, {weight: weight, date: date}]
  return {...state, userWeight: updatedUserWeight}

    Esto crea una nueva copia del array updatedUserWeight con los nuevos valores de peso y fecha, y luego devuelve una nueva copia del objeto de estado con la propiedad userWeight configurada con el nuevo array.

    Al hacer esto, el componente debería volver a renderizar con el valor actualizado de userWeight desde la tienda de Redux.

Comments are closed.