title: Can't access JSON object information React/Redux
body: <p>Feels like I'm missing something obvious here - but I can't figure out how to access my JSON data. I have a Container component: </p>
  
  <pre><code>class About extends Component {
    componentDidMount(){
      const APP_URL = 'http://localhost/wordpress/'
      const PAGES_URL = `${APP_URL}/wp-json/wp/v2/pages`
  
      this.props.fetchAllPages(PAGES_URL, 'about')
    }
  
    render(){
      return (
        &lt;div&gt;
          &lt;Header/&gt;
          &lt;div className="bg"&gt;
            &lt;div className="home-wrapper"&gt;
              &lt;h1&gt;AAAAABBBBBOOOOUUUUUT&lt;/h1&gt;
              &lt;Counter/&gt;
              &lt;AboutInfo /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;Footer/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return bindActionCreators({ fetchAllPages }, dispatch)
  }
  
  export default connect(null, mapDispatchToProps)(About);
  </code></pre>
  
  <p>And a Smart component:</p>
  
  <pre><code>class AboutInfo extends Component {
    render(){
      console.log(this.props.page);
      console.log(this.props.page.id);
      return (
        &lt;div&gt;
          &lt;h1&gt;This is ID: {this.props.page.id}&lt;/h1&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = ({ page }) =&gt; {
    return { page }
  }
  
  export default connect(mapStateToProps)(AboutInfo);
  </code></pre>
  
  <p>My action:</p>
  
  <pre><code>export const fetchAllPages = (URL, SLUG) =&gt; {
    var URLEN;
  
    if(!SLUG){
      URLEN = URL
    } else {
      URLEN = URL + "?slug=" + SLUG
    }
  
    return (dispatch) =&gt; {
      dispatch(fetchRequest());
      return fetchPosts(URLEN).then(([response, json]) =&gt; {
        if(response.status === 200){
          if(!SLUG) {
            dispatch(fetchPagesSuccess(json))
          } else {
            dispatch(fetchPageBySlugSuccess(json))
          }
        } else {
          dispatch(fetchError())
        }
      })
    }
  }
  
  const fetchPageBySlugSuccess = (payload) =&gt; {
    return {
      type: types.FETCH_PAGE_BY_SLUG,
      payload
    }
  }
  </code></pre>
  
  <p>My reducer:</p>
  
  <pre><code>const page = (state = {}, action) =&gt; {
    switch (action.type) {
      case FETCH_PAGE_BY_SLUG:
        console.log(action.paylod)
        return action.payload
      default:
        return state
    }
  }
  </code></pre>
  
  <p>This gives me:</p>
  
  <p><a href="https://i.stack.imgur.com/dNh5Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dNh5Q.png" alt="enter image description here"></a></p>
  
  <p>When I console.log(this.props.page) in my AboutInfo component, it prints the object, but when I print console.log(this.props.page.id) it gives me <strong>undefined</strong>. Why can't I print the JSON content? Thanks!</p>