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

    };
}

Sujit.Warrier · Accepted Answer · 2018-11-09 10:15:53Z

1

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 &&

answered Nov 9, 2018 at 10:15

Sujit.Warrier

2,8992 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jmarkatti Over a year ago

Your solution also works for me and it seems to be more cleaner than my own later solution so accepting yours to be the best answer ever. Thanks @sujit

jmarkatti · Accepted Answer · 2018-11-09 11:06:54Z

0

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,

    };


}

answered Nov 9, 2018 at 11:06

jmarkatti

66111 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related