title: React Redux state array changes are not re-rendering a component
body: <p>I have a project that uses React + Redux + Thunk and I am rather new to the stack. I have a scenario where I am fetching an array from an API call in my action/reducer, but it is not re-rendering in a component/container that is hooked up to the Store. The component does render the first time when I fire up the app, but at that point the array is <code>undefined</code> when logged to console. </p>
  
  <p>I am trying to display the array's length, so this is always resulting in <code>0</code>. With ReduxDevTools I see that the state of <code>network_identities</code> does populate correctly and is longer zero... Where am I going wrong?</p>
  
  <p><em>Here is my sample action</em></p>
  
  <pre><code>///////////// Sample action ///////////// 
  import axios from 'axios';
  
  const url = 'sample@url.com';
  const authorization = 'sample_auth';
  
  export function fetchConnections() {
  
      const params = {
              headers: {
              authorization,
          },
      };
  
      return (dispatch) =&gt; {
          // call returns an array of items
          axios.get(`${url}/connection`, params)
          .then((connections) =&gt; {
  
              let shake_profiles = [];
              let connected_profiles = [];
              let entity_res;
  
              // map through items to fetch the items data, and split into seperate arrays depending on 'status'
              connections.data.forEach((value) =&gt; {
                  switch (value.status) {
                  case 'APPROVED': case 'UNAPPROVED':
                      {
                      axios.get(`${url}/entity/${value.entity_id_other}`, params)
                      .then((entity_data) =&gt; {
                          entity_res = entity_data.data;
                          // add status
                          entity_res.status = value.status;
                          // append to connected_profiles
                          connected_profiles.push(entity_res);
                      });
                      break;
                      }
                  case 'CONNECTED':
                      {
                      axios.get(`${url}/entity/${value.entity_id_other}`, params)
                      .then((entity_data) =&gt; {
                          entity_res = entity_data.data;
                          entity_res.status = value.status;
                          shake_profiles.push(entity_res);
                      })
                      .catch(err =&gt; console.log('err fetching entity info: ', err));
                      break;
                      }
                  // if neither case do nothing
                  default: break;
                  }
              });
  
              dispatch({
                  type: 'FETCH_CONNECTIONS',
                  payload: { shake_profiles, connected_profiles },
              });
          });
      };
  }
  </code></pre>
  
  <p><em>Sample Reducer</em></p>
  
  <pre><code>///////////// Sample reducer ///////////// 
  const initialState = {
      fetched: false,
      error: null,
      connections: [],
      sortType: 'first_name',
      filterType: 'ALL',
      shake_identities: [],
      network_identities: [],
  };
  
  const connectionsReducer = (state = initialState, action) =&gt; {
      switch (action.type) {
      case 'FETCH_CONNECTIONS':
          console.log('[connections REDUCER] shake_profiles: ', action.payload.shake_profiles);
          console.log('[connections REDUCER] connected_profiles: ', action.payload.connected_profiles);
          return { ...state,
          fetched: true,
          shake_identities: action.payload.shake_profiles,
          network_identities: action.payload.connected_profiles,
          };
      default:
          return state;
      }
  };
  
  export default connectionsReducer;
  </code></pre>
  
  <p><em>Sample Store</em></p>
  
  <pre><code>///////////// Sample Store /////////////
  import { applyMiddleware, createStore, compose } from 'redux';
  import thunk from 'redux-thunk';
  import promise from 'redux-promise-middleware';
  import reducers from './reducers';
  
  const middleware = applyMiddleware(promise(), thunk);
  // Redux Dev Tools
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(reducers, composeEnhancers(middleware));
  
  export default store;
  </code></pre>
  
  <p><em>Sample Component - see if the API is done fetching the array, then display the length of the array</em></p>
  
  <pre><code>///////////// Sample Component /////////////
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import { bindActionCreators } from 'redux';
  import CSSModules from 'react-css-modules';
  import * as ConnectionActions from 'actions/connections';
  
  import styles from './styles.scss';
  
  function mapStateToProps(state) {
  return {
      network_identities: state.connections.network_identities,
      loadedConnections: state.connections.fetched,
  };
  }
  
  function mapDispatchToProps(dispatch) {
  return {
      actions: bindActionCreators(Object.assign({}, ConnectionActions), dispatch),
  };
  }
  
  class Counter extends Component {
  componentWillMount() {
      const { network_identities, actions } = this.props;
      if (!network_identities.length) {
      console.log('||| fetching Connections');
      actions.fetchConnections();
      }
  }
  
  render() {
      let { network_identities, loadedConnections} = this.props;
  
      console.log('[Counter] network_identities[0]: ', network_identities[0]);
      console.log('[Counter] network_identities: ', network_identities);
      console.log('[Counter] loadingConnections: ', loadingConnections);
  
      return (
      &lt;div&gt;
          &lt;Link to="/network"&gt;
          &lt;div&gt;
              &lt;span&gt;Connections&lt;/span&gt;
              { !loadedConnections ? (
              &lt;span&gt;&lt;i className="fa fa-refresh fa-spin" /&gt;&lt;/span&gt;
              ) : (
              &lt;span&gt;{network_identities.length}&lt;/span&gt;
              ) }
          &lt;/div&gt;
          &lt;/Link&gt;
      &lt;/div&gt;
      );
  }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(CSSModules(Counter, styles));
  </code></pre>
  
  <p>I suspect I am either mutating the state in my reducer, or I am misusing Thunk. </p>