Los datos no pasan al componente de React Redux

Estoy trabajando en un proyecto React Redux.

Mi Reductor es como abajo

statusReducer.js

import { FETCH_STATUS } from "../firebase/types";

export default (state = false, action) => {
  switch (action.type) {
    case FETCH_STATUS:
      return action.payload || null;
    default:
      return state;
  }
};

Mi despachador es como abajo.

Status.js

import firebase from 'firebase/app';
import { todosRef, authRef, provider } from './firebase';
import { FETCH_STATUS, FETCH_ONESTATUS } from './types.js';

const databaseRef = firebase.firestore();

export const fetchStatus = uid => async dispatch => {
    var data = [];

    databaseRef.collection('status').doc(uid).collection('status').get().then((snapshot) => {
        snapshot.forEach((doc) => {
            var snap = doc.data();
            snap.key = doc.id;
            data.push(snap);
            console.log(data); // I am getting values here
        });

        dispatch({
            type: FETCH_STATUS,
            payload: data,
        });
    });
};

Mi componente es como abajo

import React from "react";
import * as actions from './firebase/Status';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'


class Status extends React.Component {

  componentWillMount() {
    const { auth } = this.props;
    this.props.fetchStatus(auth.uid);
  };


  renderStatus() {
    const { status } = this.props;
    const data = status ? Object.values(status) : [];

    console.log(status) // I am not getting values here
  }


  render() {
    return (
      //more HTML code
    );
  }
}

const mapStateToProps = ({ auth, status }) => {
  return {
    auth,
    status,
  }
}

export default connect(
  mapStateToProps,
  actions
)(Status);

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

3 Respuestas:

  • Hay algún problema con tu Status.js archivo. Estás buscando datos de la base de fuego e intenta enviarlo. Pero el problema es el envío de su programa antes de obtener la base de datos. Así que puedes usar JS Promise para eso. ¡Quizá esto ayude!

    ...
const request = snapshot.forEach((doc) => {
    return new Promise((resolve) => {
        var snap = doc.data();
        snap.key = doc.id;
        console.log(data); // I am getting values here
  });
});

Promise.all(request).then(() => {
    dispatch({
      type: FETCH_STATUS,
      payload: data,
  });
});
...

    Respondida el Dec 17, 2020 a las 09:15 - por scriptsorcerer

    Votos positivos: 0 | Votos negativos: 0

  • El problema puede estar en cómo estás manejando el estado y la actualización del componente en tu componente de React.

    En primer lugar, debes asegurarte de que estás haciendo correctamente el dispatch de la acción FETCH_STATUS en tu despachador fetchStatus. En el código que proporcionaste, parece que estás haciendo correctamente el dispatch con los datos obtenidos de la base de datos Firestore.

    En segundo lugar, en tu componente Status, el método componentWillMount está obsoleto y se desaconseja su uso. En su lugar, puedes usar el método componentDidMount para cargar los datos después de que el componente haya sido montado en el DOM.

    Por otro lado, en el método renderStatus, estás intentando acceder a los datos del estado de status directamente, pero es posible que en ese momento los datos aún no hayan llegado debido a la asincronía de la carga de datos desde la base de datos. Puedes validar si los datos están disponibles antes de intentar acceder a ellos.

    Aquí te muestro cómo podrías modificar tu componente Status para manejar mejor la carga de datos y la actualización del estado:

    jsx
import React from "react";
import * as actions from './firebase/Status';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'

class Status extends React.Component {

  componentDidMount() {
    const { auth } = this.props;
    this.props.fetchStatus(auth.uid);
  };

  renderStatus() {
    const { status } = this.props;
    if (!status) return null;

    const data = Object.values(status);
    console.log(data);

    return (
      // render your status data here
    );
  }

  render() {
    return (
      
    
        {this.renderStatus()}
      
    
    );
  }
}

const mapStateToProps = ({ auth, status }) => {
  return {
    auth,
    status,
  }
}

export default connect(mapStateToProps, actions)(Status);

    Con estos cambios, el componente se actualizará correctamente cuando los datos estén disponibles en el estado de Redux y se mostrarán en la interfaz de usuario. Además, ahora estás gestionando mejor el ciclo de vida del componente y la carga de los datos. ¡Espero que esta información te sea útil! Si tienes alguna otra pregunta o duda, ¡házmelo saber!

    Respondida el Dec 18, 2020 a las 09:12 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que el componente Status no recibe los datos de estado porque el despachador fetchStatus es asincrónico. Cuando se llama al despachador en componentWillMount, el componente aún no ha recibido los datos del estado, por lo que this.props.status es undefined.

    Para solucionar este problema, puedes usar el ciclo de vida componentDidMount en su lugar. componentDidMount se llama después de que el componente haya recibido sus props, por lo que puedes estar seguro de que this.props.status estará disponible en ese momento.

    Aquí tienes el código actualizado:

    
import React from "react";
import * as actions from './firebase/Status';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'


class Status extends React.Component {

  componentDidMount() {
    const { auth } = this.props;
    this.props.fetchStatus(auth.uid);
  };


  renderStatus() {
    const { status } = this.props;
    const data = status ? Object.values(status) : [];

    console.log(status) // I am not getting values here
  }


  render() {
    return (
      //more HTML code
    );
  }
}

const mapStateToProps = ({ auth, status }) => {
  return {
    auth,
    status,
  }
}

export default connect(
  mapStateToProps,
  actions
)(Status);

    También puedes usar una función asíncrona en componentWillMount y esperar a que se resuelva la promesa devuelta por el despachador. Sin embargo, este enfoque es más complicado y propenso a errores. Usar componentDidMount es generalmente la mejor manera de manejar las llamadas asincrónicas en los componentes de React.

    Respondida el Dec 18, 2020 a las 09:22 - por Gemini

    Votos positivos: 0 | Votos negativos: 0