title: express react redux returning data as array from a promise
body: <p>When I put an array into the return everything works fine with the dispatch and rendering the items reducer-items.js. I am not sure what i missing but the data when i change is not showing</p>
  
  <pre><code>    export default function () {
            return [
                {id: 1, first: "Maxx", last: "Flinn", age: 17},
                {id: 2, first: "Allen", last: "Matt", age: 25},
            ]
      }
  </code></pre>
  
  <p>when I run an async function to retrieve the data from express server I am able to view the response and retrieve the data.</p>
  
  <pre><code>let items;
  let callApi = async () =&gt; {
      console.log("calling API");
  
      const response = await fetch('/api/hello');
      console.log("response", response);
  
      const body = await response.json();
  
      if (response.status !== 200) throw Error(body.message);
      console.log("body API", body);
      items = body;
      return body;
    };
  
  
  export default function () {
        return[ callApi() ]
  }
  </code></pre>
  
  <p>server.js</p>
  
  <pre><code>const express = require('express');
  
  const app = express();
  const port = process.env.PORT || 5000;
  
  var data = [
       {id: 1, first: "Maxx", last: "Flinn", age: 17},
       {id: 2, first: "Allen", last: "Matt", age: 25},
  ]
  
  
  app.get('/api/hello', (req, res) =&gt; {
  
    res.json([
       {id: 1, first: "Maxx", last: "Flinn", age: 17},
       {id: 2, first: "Allen", last: "Matt", age: 25},
    ]);
  });
  
  app.listen(port, () =&gt; console.log(`Listening on port ${port}`));
  </code></pre>
  
  <p>I am not receiving any error but instead of rendering data[{},{}] i am rendering [Promise] and not seeing any data. Not sure if I am return correctly. my console.log on render shows.</p>
  
  <pre><code> [Promise]0: 
      Promise__proto__: 
         Promise[[PromiseStatus]]: 
            "resolved"[[PromiseValue]]: 
                    Array(2)
     0:{id: 2, first: "Allen", last: "Matt", age: 25, }
     1: {id: 3, first: "Kris", last: "Chen", age: 23, …}
  </code></pre>
  
  <p>this is my item-list.js container </p>
  
  <pre><code>import React, {Component} from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import { selectedItem } from '../actions/index';
  
  class ItemList extends Component {
    renderList() {
          return this.props.items.map((item) =&gt; {
              return (
                  &lt;li key={item.id}
                      onClick={() =&gt; this.props.selectedItem(item)}
                  &gt;
                      {item.first} {item.last}
                  &lt;/li&gt;
              );
          });
      }
  
  
     render() {
       console.log("render", this.props.items);
       return (
         &lt;ul&gt;
  
           {this.renderList()}
         &lt;/ul&gt;
       );
     }
  }
  function mapStateToProps(state) {
    return {
      items: state.items,
    };
  
  }
  
  function matchDispatchToProps(dispatch) {
    return bindActionCreators({ selectedItem: selectedItem }, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(ItemList);
  </code></pre>