Wsrtjtyk

I'm working with the NHL API in a React/Redux project. I am using Thunk and Axios to make an API call in the action like so:

import axios from "axios";



export function fetchRangersStats() {

    return function(dispatch) {

        dispatch({ type: "FETCH_RANGERS_STATS"})

        axios.get('https://statsapi.web.nhl.com/api/v1/teams/3/stats')

            .then((response) => {

                dispatch({

                    type: "FETCH_RANGERS_STATS_FULFILLED",

                    payload: response.data.stats[0].splits[0]

                })

            })

            .catch((err) => {

                dispatch({

                    type: "FETCH_RANGERS_STATS_REJECTED",

                    payload: err

                })

            })

    }

}

I am able to retrieve the API data and have it set up in my App.js like this:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.scss';

import {connect} from 'react-redux';

import { fetchRangersStats } from './actions/fetchRangersStats-action';



class App extends Component {



  componentDidMount = () => {

    this.props.fetchRangersStats();

  }



  render() {



    console.log(this.props.rangersStats.data.stat);

    const stats = this.props.rangersStats.data;



    console.log('Type : ' + typeof(this.props.rangersStats.data.stat));



    return (

      <div className="App">



      </div>

    );

  }

}



const mapDispatchToProps = dispatch => ({

  fetchRangersStats: () => dispatch(fetchRangersStats())

})



const mapStateToProps = state => ({

  rangersStats: state.fetchRangersStatsReducer

})





export default connect(mapStateToProps, mapDispatchToProps)(App);

This works and I can retrieve the API data just fine but I am having an issue accessing nested object properties and their values. this.props.rangersStats.data gives me this:

If I go one level deeper into the stat object I get via this.props.rangersStats.data.stat it works and I get this:

That works just fine, but when I try to grab data from within the stat object using something like this.props.rangersStats.data.stat.gamesPlayed or any other property within stat I get an undefined error.

Why can't I used dot notation to grab the properties and their values with stat? i.e. gamesPlayed, wins, losses, etc..

What is the proper way to access the data within this.props.rangersStats.data.stat? I'm new to Redux and Thunk so bear with me.

Here is the reducer :

export default function reducer (state = {

    data: ,

    fetching: false,

    fetched: false,

    error: null

}, action) {

    switch(action.type) {

        case "FETCH_RANGERS_STATS": {

            return {

                ...state,

                fetching: true

            }

        }

        case "FETCH_RANGERS_STATS_REJECTED": {

            return {

                ...state,

                fetching: false,

                error: action.payload

            }

        }

        case "FETCH_RANGERS_STATS_FULFILLED": {

            return {

                ...state,

                fetching: false,

                fetched: true,

                data: action.payload

            }

        }

        default: return state;

    }

}

It seems that data inside your state is defined as an array

state = {

    data: ,

    fetching: false,

    fetched: false,

    error: null

}

but you are assigning to the array an object {} (action payload is an object)

data: action.payload

This can explains the error you're getting when trying to grab deeper with dot notation the properties and their values