Flat List not updated when data supplied with Redux (React Native)

Question

My problem is that my flat list is not being updated when I add an element to "entriesPerDay" in my Redux store. Both home screen and the Flat List have state mapped to props. I have tried: - passing the data to EntriesList through props from Home Screen - using the state from reducer as data provider of the EntriesList

Nothing seem to be working and the shouldComponentUpdate or any other relevant function is never called. REDUCER:

 case NEW_ENTRY_LOCAL:

        let newState = {...state};
        newState.entriesPerDay.push(action.entry);

        return{
            ...newState
        }

HOME SCREEN:

 (...)
 render() {  

      return (

        <View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'flex-start' }}>
         <NavBar onItemPressed={this.onItemPressedHandler}/>
          <DayPicker onDatePicked={this.onDatePickedHandler} />
          <TotalTime totalTime={this.props.total} />
          <EntriesList entries={this.props.entriesPerDay}/>
          <Timer onEntryEnd={this.onEntryEndHandler} onTimeChanged={this.onTimeChangedHandler} onEntryCreate={this.onEntryCreateHandler}/>
          <Button title="clickkk" onPress={this.onItemPressedHandler}>CLICK ME</Button>
        </View>
      );
    }

FLAT LIST:

    class entriesList extends React.Component {




  componentDidMount()
  {
     reactMixin(entriesList, TimerMixin); 
     this.timer = setInterval(() =>  {

      console.log(this.props.entriesPerDay);

   }, 3000);

  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  shouldComponentUpdate(nextProps, nextState)
  {
    console.log("new props" + nextProps);
    return true;
  }


  render()
    {

    return (

        <FlatList style={styles.full}
        data={this.props.entries}
        extraData={this.props.entriesPerDay}
        renderItem={
          (info)=>(
            <ListItem  key={info.item.key}
             startDateTime={info.item.startDateTime}
             endDateTime = {info.item.endDateTime}
             description = {info.item.description}
             prevEntryEnd = {info.item.prevEntryEnd}
             nextEntryStart = {info.item.nextEntryStart}
             total = {info.item.totalTime}
             />
          )
        }

        />
    );
  }
}


const mapStateToProps = state => {
  return {
    serverCopy : state.entries.serverCopy,
    entriesPerDay : state.entries.entriesPerDay, 
    pickedDate : state.entries.pickedDate,
    total: state.entries.total,
    local: state.entries.local
  };
};

const mapDispatchToProps = dispatch => {
  return {
      onPickDate: (day) => dispatch(pickDay(day)),
      onDataSet: (data) => dispatch(setData(data)),
      onNewEntryLocal: (entry) => dispatch(newEntryLocal(entry)),
      onEndEntryLocal: (entry) => dispatch(endEntryLocal(entry)),


  };
};

export default connect(mapStateToProps, mapDispatchToProps)(entriesList)

;

Answer 1

Try :

 case NEW_ENTRY_LOCAL:

        let newEntriesPerDay = state.entriesPerDay.concat(action.entry);

        return {
            ...state,
            entriesPerDay: newEntriesPerDay
        }

It is because entriesPerDay was just beeing copied by reference in the newState in your previous example. redux and react compare the reference and see that it's the same so no re-render will happen. That's why you should copy it manually.

Note : Use concat instead of push to return a new array (new reference)