Отображение более одной записи из разных вызовов API с помощью React Redux

Question

У меня две разные записи, которые выбираются по-разному из разных вызовов API, и я хочу, чтобы две записи отображались на той же странице, используя реагировать редукса.

Если я получаю записи отдельно, как в записи 1 и 2, все работает нормально, но Если я попытался отобразить записи 1 и 2 вместе на одной странице, я получаю сообщение об ошибке

TypeError: Cannot read property 'items2' of undefined
    at RecordPage.render 

Запись 1 работает нормально, если доставляется отдельно

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class RecordPage extends React.Component {

constructor(props) {
        super(props);
this.state = {
            us: 0

        };

    }

    componentDidMount() {


this.props.dispatch(userActions.getAll_Record1());
//this.props.dispatch(userActions.getAll_Record2());

    }

    render() {
        const { rec1, recs1 } = this.props;

        return (
            <div style={{background:'red'}} className="well col-md-6 col-md-offset-3">



  {recs1.items1 &&
                    <ul>
<h1> First Records</h1>
                        {recs1.items1.map((rec1, index) =>

         <li  key={rec1.id}>

{ rec1.name+' '+rec1.id}


</li>

                        )}


                     </ul>
                }


                <p>

First Record as per rec1

              </p>


            </div>



        );
    }
}


function mapStateToProps(state) {
    const { recs1, authentication } = state;
    const { rec1 } = authentication;
    return {
        rec1,
        recs1

    };
}


const connectedRecordPage = connect(mapStateToProps)(RecordPage);
export { connectedRecordPage as RecordPage};

Запись 2 работает нормально, если выбирается отдельно

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class RecordPage extends React.Component {

constructor(props) {
        super(props);
this.state = {
            us: 0

        };

    }

    componentDidMount() {


//this.props.dispatch(userActions.getAll_Record1());
this.props.dispatch(userActions.getAll_Record2());

    }

    render() {
        const { rec2, recs2 } = this.props;

        return (
            <div style={{background:'red'}} className="well col-md-6 col-md-offset-3">



  {recs2.items2 &&
                    <ul>
<h1>Second Records </h1>
                        {recs2.items2.map((rec2, index) =>

         <li  key={rec2.id}>

{ rec2.email+' '+rec2.id}


</li>

                        )}


                     </ul>
                }


                <p>

Second Record as per rec2

              </p>


            </div>



        );
    }
}


function mapStateToProps(state) {
    const { recs2, authentication } = state;
    const { rec2 } = authentication;
    return {
        rec2,
        recs2

    };
}


const connectedRecordPage = connect(mapStateToProps)(RecordPage);
export { connectedRecordPage as RecordPage};

Вот моя проблема. Я хочу отобразить записи 1 и 2 вместе на одной странице, но получаю ошибку

TypeError: Cannot read property 'items2' of undefined
    at RecordPage.render

Код для отображения записи 1 и 2 вместе

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class RecordPage extends React.Component {

constructor(props) {
        super(props);
this.state = {
            us: 0

        };

    }

    componentDidMount() {

  //get record1     
this.props.dispatch(userActions.getAll_Record1());

//get record 2
this.props.dispatch(userActions.getAll_Record2());

    }

    render() {
        const { rec1, recs1 } = this.props;
        const { rec2, recs2 } = this.props
        return (
            <div style={{background:'red'}} className="well col-md-6 col-md-offset-3">

             // show first record  

  {recs1.items1 &&
                    <ul>
<h1> First Records</h1>
                        {recs1.items1.map((rec1, index) =>

         <li  key={rec1.id}>

{ rec1.name+' '+rec1.id}


</li>

                        )}


                     </ul>
                }


            // show second record  

  {recs2.items2 &&
                    <ul>
<h1> First Records</h1>
                        {recs2.items2.map((rec2, index) =>

         <li  key={rec2.id}>

{ rec2.email+' '+rec2.id}


</li>

                        )}


                     </ul>
                }


                <p>

show first and second record together

              </p>


            </div>



        );
    }
}


function mapStateToProps(state) {
    const { recs1, authentication } = state;
    const { rec1 } = authentication;
    return {
        rec1,
        recs1

    };
}


const connectedRecordPage = connect(mapStateToProps)(RecordPage);
export { connectedRecordPage as RecordPage};

Я не знаю, если проблема в коде ниже

   componentDidMount() {

  //get record1     
this.props.dispatch(userActions.getAll_Record1());

//get record 2
this.props.dispatch(userActions.getAll_Record2());

    }

or 

function mapStateToProps(state) {
    const { recs1, authentication } = state;
    const { rec1 } = authentication;
    return {
        rec1,
        recs1

    };
}

Answer 1

Вот что на самом деле решает проблему. Я гарантирую, что свойства записей правильно установлены в пределах mapStateToProps(state) {} функций в соответствии с приведенным ниже кодом и работают нормально.

function mapStateToProps(state) {
const { recs1} = state;
const { rec1} = state;
 const { recs2} = state;
 const { rec2} = state;

    return {
        rec1,
        recs1,
 rec2,
        recs2,

    };


}

Answer 2

Привет, проблема очень проста, когда приложение запускается, в магазине ничего нет, прежде чем сделать звонок. но вы пытаетесь выполнить рендеринг с использованием recs1.items1 && recs2.items2 в вашей функции рендеринга, но в хранилище ничего нет, поскольку вызовы не завершены. поэтому recs1 или recs2 не определены. Поэтому при использовании реквизитов, отображаемых для хранения, всегда делайте нулевую проверку для реквизита.

т.е. в вашем методе рендеринга измените эти 2 строки, чтобы проверить, не определены ли recs1 и recs2

{recs1 && recs1.items1 &&
{recs2 && recs2.items2 &&