есть ли this.props.produts.phone ['Huawei'], почему undefine

Question

Когда я выбрал данные и дизайн для массива объектов из Firebase Firestore для моего приложения «Реакция редукса». затем mapStateToProps() верните эти данные из хранилища или состояния резервов. Но эти данные не определены, когда я хочу прочитать эти данные, такие как карта, forEach и т. Д.

набор данных:

Huawei: Array(5)
0: {Brand: "Huawei", Name: "Honor 10", Specification: {…}, id: "1", imageUrl: "https://firebasestorage.googleapis.com/v0/b/e-comm…=media&token=ea70cb96-0e86-4189-8d6f-a9e18c1c301b", …}
1: {Brand: "Huawei", Name: "Nove-3e", Specification: {…}, id: "2", imageUrl: "https://firebasestorage.googleapis.com/v0/b/e-comm…=media&token=cdc1f1b5-76c3-4124-b1ea-9c92bda4dc45", …}
2: {Brand: "Huawei", Name: "Y5 lite", Specification: {…}, id: "5", imageUrl: "https://firebasestorage.googleapis.com/v0/b/e-comm…=media&token=8ee8967c-5adb-4cc8-bae0-c95091cf986f", …}
3: {Brand: "Huawei", Name: "mate 20 pro", Specification: {…}, id: "3", imageUrl: "https://firebasestorage.googleapis.com/v0/b/e-comm…=media&token=4464cf49-3108-4c33-97a1-34ec36b83daa", …}
4: {Brand: "Huawei", Name: "p20 pro", Specification: {…}, id

Home.js

import React, { Component } from 'react';
import NavBar from './../layout/NavBar'
import Carousel from "./../layout/Carousel";
import { getAllProduct } from "./../../store/action/actionProduct";
import Productlist from './../product/productlist'
import { connect } from "react-redux";

class Home extends Component {


    componentDidMount() {
        this.props.createProduct()
    }

    render() { 

        return (
            <div>
               <NavBar />
               <Carousel />
               {
                   ['Huawei','Oppo','Xiaomi','Samsung'].map((brand)=>{
                    return <Productlist key={brand} phoneName={brand} />
                   })
               }

            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        createProduct: () => dispatch(getAllProduct())
    }
}

export default connect(null,mapDispatchToProps)(Home);
/reducer.js
import { combineReducers } from 'redux'

const initState = {}

const productReducer = (state = initState, action) => {

    switch(action.type){
        case "FETCH_PHONE":            
           return Object.assign({},state,{phone:action.payload})
        default:
           return state
    }
}

const initState = {}

const authReducer = (state=initState,action) =>{
    return state
}

const rootReducer = combineReducers({
    auth:authReducer,
    product:productReducer
});

export default rootReducer;
/actionProductFetch.js
import firebase from './../../config/fbConfig'

const db = firebase.firestore()




export const getAllProduct = () =>{

    let phoneData ={};

    ['Huawei','Oppo','Xiaomi','Samsung'].map((brand)=>{

        db.collection('Phone').where("Brand",'==',brand).get().then((snap)=>{
            let arr = [];
            snap.forEach((doc)=>{
                arr.push(doc.data())
            }) 
            phoneData[brand] = arr;
        })

    })
    return (dispatch) =>{
        dispatch({
            type:"FETCH_PHONE",
            payload:phoneData
        })
    }


}
/productlist.js

import React, { Component } from 'react';
import { withStyles, Grid, Paper, Typography } from "@material-ui/core";
import { connect } from "react-redux";
import 'typeface-roboto'


const styles = theme => ({
    paper: {
        ...theme.mixins.gutters(),
        paddingTop: theme.spacing.unit * 2,
        paddingBottom: theme.spacing.unit * 2,
        width: '70%',
        margin: 'auto',
        marginTop: '30px'
    },
    grid: {
        flexGrow: 1
    }
});


class Productlist extends Component {
    render() {

        const { classes } = this.props;
        typeof(this.props.products) === 'undefined' ? console.log('Tarek'):console.log(this.props.products['Huawei']);

        return (
            <Paper className={classes.paper}>
                <Grid container justify='center' spacing={8} >
                    {/* {
                        typeof(this.props.products.phone)!=='undefined'  &&this.props.products.phone[this.props.phoneName].map((value)=>{
                            return (
                                <Grid item xs={12} md={3}>
                                <img src={value.imageUrl} alt="" width='250px' height="300px" />
                                </Grid>
                            )
                        })
                    } */}
                </Grid>
            </Paper>
        );
    }
}

const mapStateToProps = (state) => {

    return {
        products: state.product.phone
    }
}

export default connect(mapStateToProps)(withStyles(styles)(Productlist));

4 times undefined when console.log(this.props.products['Huawei']);