title: React native redux not updating component
body: <p>I'm trying to setup redux with react native but it is not updating my components when the store updates.</p>
  
  <pre><code>class Dinner extends React.Component {
  
      componentDidUpdate() {
          console.log('does not get called when store update');
      }
  
      setSelected = (meal) =&gt; {
          var index = this.props.selectedDinner.indexOf(meal);
  
          if (index === -1) {
              console.log('Adding meal to selected: '+meal.name);
              if (this.props.selectedDinner[0] === null) {
                  var tempArr = this.props.selectedDinner;
                  tempArr[0] = meal;
                  this.props.setSelectedDinner(tempArr);
  
              } else if(this.props.selectedDinner[1] === null)  {
                  var tempArr = this.props.selectedDinner;
                  tempArr[1] = meal;
                  this.props.setSelectedDinner(tempArr);
              } else if(this.props.selectedDinner[2] === null)  {
                  var tempArr = this.props.selectedDinner;
                  tempArr[2] = meal;
                  this.props.setSelectedDinner(tempArr);
              }
          } else {
              console.log("removing meal from selected: "+meal.name)
              var tempArr = this.props.selectedDinner;
              tempArr[index] = null;
              this.props.setSelectedDinner(tempArr);
          }
          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
          this.forceUpdate()
      };
  
      render() {
          return (
            &lt;View style={{flex: 1, width: 360, justifyContent: 'center', alignItems: 'center', paddingBottom: 20}}&gt;
              &lt;View style={{width: 340, backgroundColor: 'white', justifyContent: 'flex-start', alignItems: 'center'}}&gt;
                &lt;Text style={{height: 50, fontSize: 20, fontWeight: 'bold', flex: 1, justifyContent: 'center', alignItems: 'center'}}&gt;Dinner&lt;/Text&gt;
                {
                  this.props.dinnerFeed.map((prop, key) =&gt; 
                    prop === null ?
                      &lt;TouchableOpacity style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}&gt;&lt;LoadingMealTile /&gt;&lt;/TouchableOpacity&gt;
                      :
                      (prop === 'none' ? 
                        &lt;TouchableOpacity style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}&gt;&lt;BlankMealTile /&gt;&lt;/TouchableOpacity&gt;
                        :
                        this.props.selectedDinner === null || this.props.selectedDinner.indexOf(prop) === null ?
                          &lt;TouchableOpacity onPress={this.setSelected.bind(this, prop)} style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}&gt;&lt;MealTile selected={-1} name={prop.name} id={prop.id} url={prop.url} key={key}/&gt;&lt;/TouchableOpacity&gt;
                          :
                          &lt;TouchableOpacity onPress={this.setSelected.bind(this, prop)} style={{width: 320, height: 120, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10, flexShrink: 0}} key={key}&gt;&lt;MealTile selected={this.props.selectedDinner.indexOf(prop)} name={prop.name} id={prop.id} url={prop.url} key={key}/&gt;&lt;/TouchableOpacity&gt;
                      )
                  )  
                }
  
                &lt;TouchableOpacity onPress={this.props.loadFeedMeals} style={{width: 320, height: 50, backgroundColor: 'lightgrey', flex: 1, justifyContent: 'center', alignItems: 'center', zIndex: 1, marginBottom: 10}}&gt;&lt;Text style={{fontSize: 15, }}&gt;Load More Meals&lt;/Text&gt;&lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          );
        }
      }
  
  
      function mapStateToProps(state) { 
        return {
             dinnerFeed: state.dinnerFeed,
             selectedDinner: state.selectedDinner,
        }
      };
  
      function mapDispatchToProps(dispatch) {
        return {
          setDinnerMeals: (dinnerMeals) =&gt; dispatch(setDinnerMeals(dinnerMeals)),
          setSelectedDinner: (selectedDinner) =&gt; dispatch(setSelectedDinner(selectedDinner)),
  
        }
      };
  
      export default connect(mapStateToProps, mapDispatchToProps)(Dinner);
  
  </code></pre>
  
  <p>The function setSelectedDinner correctly changes the redux store, but the component doesn't call its componentDidUpdate function</p>
  
  <p>edit:Here is the reducer code</p>
  
  <pre><code>
      export default (state, action) =&gt; {
          console.log(action);
          switch (action.type) {
              case "SET-SELECTED-DINNER":
                  return {
                          ...state,
                          selectedDinner: action.selectedDinner
                    };
              default:
                  return state;
          }
      };
  
  </code></pre>
  
  <p>I believe this code shouldn't mutate the state directly because i have used this reducer for redux on a reactjs project</p>