Q:

Reducer returns payload correctly but the component receives it as undefined

I am implementing an application where I am fetching some data from firebase. The firebase database doesn't require authentication and I already changed the rules for public access.
However, I have a action that fetches a particular row from the database, using the firebase key:
action
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 shows the data has been successfully retrieved.
My reducer also returns the payload successfully:
reducer
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;
  }
}

The component, however receives the payload as undefined when I link to it from the previous page, and is apparently null when I refresh the page.
component
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);

The key in the URL is displayed correctly and from a console.log in the mapStateToProps I receive the correct param.
Console log

Clients console.log form client_show component

A:

So, I finally solved the issue here.
Basically, I was not sending the firebase key form the action to the reducer, expecting to have the id in the action.payload.id.
I now added a new element in my object where I am passing the firebase key:
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()
        });
     }); 
  };
} 

Then, in my reducer:
case FETCH_CLIENT:
  return { ...state, [action.key]: action.payload };

