Reducer gibt Payload korrekt zurück, aber die Komponente empfängt es als undefiniert

Question

Ich implementiere eine Anwendung, wo ich einige Daten von Firebase abrufe. Die Firebase-Datenbank erfordert keine Authentifizierung und ich habe bereits die Regeln für den öffentlichen Zugriff geändert.

Allerdings habe ich eine Aktion, die eine bestimmte Zeile aus der Datenbank abruft, mit der Feuerbasis Schlüssel:

Aktion

export function fetchClient(id) { 
    return (dispatch) => { 
    database.ref(`/clients/${id}`) 
     .on('value', snapshot => { 
      console.log(snapshot.val()); 
     dispatch({ 
      type: FETCH_CLIENT, 
      payload: snapshot.val() 
     }); 
    }); 
    }; 
} 

console.log die Daten zeigt, wurde erfolgreich abgerufen.

Mein Minderer auch die Nutzlast erfolgreich zurückgegeben:

Minderer

const INITIAL_STATE = {} 

export default function (state = INITIAL_STATE, action) { 
switch(action.type){ 
    case FETCH_CLIENTS: 
     return action.payload; 
    case FETCH_CLIENT: 
     console.log(action.payload); 
     return { ...state, [action.payload.id]: action.payload }; 
    case CREATE_CLIENT: 
     return action.payload; 
    default: 
     return state; 
    } 
} 

Die Komponente erhält jedoch die Nutzlast als undefiniert, wenn ich von der vorherigen Seite zu verknüpfen, und ist offenbar null, wenn Ich aktualisiere die Seite.

Komponente

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { fetchClient } from '../actions'; 
import { Link } from 'react-router-dom'; 

class ClientShow extends Component { 

componentDidMount() { 
    const { id } = this.props.match.params; 
    console.log(this.props); 
    this.props.fetchClient(id); 
} 
render(){ 
    const { myClient } = this.props; 
    if (!myClient) { 
    return (
     <div> 
      <Link className="btn btn-danger" to="/" >Home</Link> 
      <div>Loading...</div> 
     </div> 
    ); 
    } 
    return (
    <div> 
     <Link to="/" className="btn btn-primary" >Home</Link> 
     <h2>{myClient.name}</h2> 
     <h4>The client is loaded... but undefined</h4> 
    </div> 
); 
} 
} 

function mapStateToProps({ clients }, ownProps) { 
    //console.log(ownProps.match.params.id);  
    return { myClient: clients[ownProps.match.params.id] }; 
} 

export default connect(mapStateToProps, { fetchClient })(ClientShow); 

Der Schlüssel in der URL ist richtig und von einem console.log in den mapStateToProps angezeigt ich die richtige param erhalten.

Console log

Clients console.log Form client_show Komponente

Answer 1

Also, ich löste schließlich die hier Thema.

Grundsätzlich habe ich nicht den Firebase-Schlüssel Formular die Aktion an den Reducer gesendet, in der Erwartung, die ID in der action.payload.id haben.

Ich habe jetzt ein neues Element in meinem Objekt, wo ich die Feuerbasis Schlüssel bin vorbei:

export function fetchClient(id) { 
    return (dispatch) => { 
    database.ref(`/clients/${id}`) 
     .on('value', snapshot => { 
      console.log(snapshot.val()); 
     dispatch({ 
      type: FETCH_CLIENT, 
      key: id, // Adding the Firebase KEY here 
      payload: snapshot.val() 
     }); 
    }); 
    }; 
} 

Dann in meinem Minderer:

case FETCH_CLIENT: 
    return { ...state, [action.key]: action.payload };