Displaying more than one record from different API Call using React Redux

Question

I have two differents records to be fetched differently from different API Call and I want the two records to be displayed on the same page using react redux.

If I fetched the records seperately as per record 1 and 2 everything works fine but If I tried to display record 1 and 2 together on the same page, am getting error

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

Record 1 working fine if fetched separetly

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};

Record 2 working fine if fetched separetly

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};

Here is my issue. I want to display record 1 and 2 together on the same page but am getting error

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

Code for displaying record 1 and 2 together

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};

I do not know if the problem is from the code below

   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

This is what actually solve the problem. I ensure that records properties are well set within the mapStateToProps(state) {} fnctions as per code below and its working fine..

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

    return {
        rec1,
        recs1,
 rec2,
        recs2,

    };


}

Answer 2

Hi the problem is very simple,when the app starts there is nothing in store, before you make the call. but you are trying to render using recs1.items1 && recs2.items2 in your render function, but there is nothing in the store as the calls have not completed. so recs1 Or recs2 are undefined.so while using props mapped to store always make a null check for the prop.

i.e in your render method change these 2 lines to check if recs1 and recs2 are undefined

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