title: Why do my components not re-render when redux store updates?
body: <p>I'm working with React Native and I'm trying to update my HomeScreen Component by dispatching an action to the store, however when the store's state changes, the component doesn't automatically re-render and i'm not sure if it's because i'm connecting incorrectly, or my navigation is setup incorrectly with redux. </p>
  
  <p>I've tried the standard Redux syntax, connecting my component, dispatching an action, and updating the reducer. However, although the state has the new changes, my component doesn't rerender upon the state changing.</p>
  
  <p>Here is what my component looks like:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchDebts } from '../../actions';
  import HomeButtons from '../Components/Buttons';
  import DebtNames from '../Components/DebtNames';
  import { Container, Header, Body, Title, Text, Spinner } from 'native-base';
  import { StyleSheet } from 'react-native';
  
  class HomeScreen extends Component {
      constructor(props) {
          super(props);
          this.state = { iconClicked: false };
      }
  
      componentDidMount() {
          const { fetchData } = this.props;
          fetchData();
      }
  
      onRightIcon = debtId =&gt; {
          const { iconClicked } = this.state;
          this.setState({
              iconClicked: !iconClicked,
              debtId
          });
      };
  
      onItemDeleted = async id =&gt; {
          try {
              await deleteData(id);
              this.setState({
                  debts: await fetchData()
              });
          } catch (e) {
              console.log(e);
          }
      };
  
      render() {
          const { iconClicked, debtId } = this.state;
          const { debts, navigation, loading } = this.props;
          if (!debts) {
              return &lt;Spinner color="blue" style={{ alignSelf: 'center', justifyContent: 'center' }} /&gt;;
          }
          return (
              &lt;Container style={{ backgroundColor: '#083D77' }}&gt;
                  &lt;Header style={{ backgroundColor: '#8B2635', marginTop: checkIfIos() ? 0 : 20 }}&gt;
                      &lt;Body&gt;
                          &lt;Title style={{ color: '#E6E6E9', alignSelf: 'center' }}&gt;Debt Manager&lt;/Title&gt;
                      &lt;/Body&gt;
                  &lt;/Header&gt;
                  &lt;HomeButtons navigation={navigation} /&gt;
                  &lt;Text style={style.textStyle}&gt;Recently Added Items&lt;/Text&gt;
                  {debts &amp;&amp; (
                      &lt;DebtNames
                          debts={debts}
                          iconClicked={iconClicked}
                          debtId={debtId}
                          onRightIcon={this.onRightIcon}
                          onItemDeleted={this.onItemDeleted}
                      /&gt;
                  )}
              &lt;/Container&gt;
          );
      }
  }
  
  const mapStateToProps = state =&gt; ({
      debts: state.debts.items,
      loading: state.debts.loading,
      error: state.debts.error
  });
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          fetchData: () =&gt; dispatch(fetchDebts())
      };
  };
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(HomeScreen);
  </code></pre>
  
  <p>My actions :</p>
  
  <pre><code>export const fetchDebtsBegin = () =&gt; {
      return {
          type: FETCH_DEBTS_BEGIN
      };
  };
  
  export const fetchDebtsSuccess = debts =&gt; {
      return {
          type: FETCH_DEBTS_SUCCESS,
          payload: debts
      };
  };
  
  export const fetchDebtsFailure = error =&gt; ({
      type: FETCH_DEBTS_FAILURE,
      payload: { error }
  });
  
  export const fetchDebts = () =&gt; {
      return (dispatch, getState) =&gt; {
          dispatch(fetchDebtsBegin());
          fetchData()
              .then(res =&gt; {
                  dispatch(fetchDebtsSuccess(res.data));
              })
              .catch(err =&gt; {
                  dispatch(fetchDebtsFailure(err));
              });
  };
  };
  </code></pre>
  
  <p>My Reducer:</p>
  
  <pre><code>const initialState = {
      items: [],
      loading: false,
      error: null
  };
  
  export default fetchDebtsReducer = (state = initialState, action) =&gt; {
      switch (action.type) {
          case FETCH_DEBTS_BEGIN:
              return {
                  ...state,
                  loading: true
              };
          case FETCH_DEBTS_SUCCESS:
              return {
                  ...state,
                  items: [...action.payload],
                 //also tried items: action.payload
                  loading: false
              };
          case FETCH_DEBTS_FAILURE:
              return {
                  ...state,
                  loading: false,
                  error: action.payload.error
              };
             };
  }
  </code></pre>
  
  <p>If it helps, heres my Navigation:</p>
  
  <pre><code>import React from 'react';
  import { createBottomTabNavigator, createAppContainer, stackNavigator } from 'react-navigation';
  import { defaultNavigationOptions } from './utils';
  import { connect } from 'react-redux';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import HomeScreen from './screens/HomeScreen';
  import AddPaymentScreen from './screens/AddPaymentScreen';
  
  const TabNavigator = createBottomTabNavigator(
      {
          Home: {
              screen: HomeScreen,
              navigationOptions: {
                  tabBarLabel: 'HOME',
                  tabBarIcon: ({ tintColor }) =&gt; &lt;Icon name="home" size={24} color={tintColor} /&gt;
              }
          },
          AddPayment: {
              screen: AddPaymentScreen,
              navigationOptions: {
                  tabBarLabel: 'ADD PAYMENT',
                  tabBarIcon: ({ tintColor }) =&gt; &lt;Icon name="add-circle" size={24} color={tintColor} /&gt;
              }
      },
      {
          initialRouteName: 'Home'
      },
      {
          defaultNavigationOptions
      }
  );
  
  const AppContainer = createAppContainer(TabNavigator);
  
  export default connect(null)(AppContainer);
  </code></pre>
  
  <p>And App.js:</p>
  
  <pre><code>class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = { isReady: false };
      }
      async componentWillMount() {
          await Font.loadAsync({
              Roboto: require('native-base/Fonts/Roboto.ttf'),
              Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
          });
          this.setState({ isReady: true });
      }
  
      render() {
          const { isReady } = this.state;
          if (!isReady) {
              return &lt;AppLoading /&gt;;
          }
          return (
              &lt;Provider store={store}&gt;
                  &lt;AppContainer /&gt;
              &lt;/Provider&gt;
          );
      }
  }
  </code></pre>
  
  <p>I expect the HomeScreen Component to automatically re-render upon the state change in the store. But the only thing that's happening, is the store is updating, and the component is not automatically re-rendering.</p>
  
  <p>Any help would be greatly appreciated.</p>