React native redux and ListView

Question

I have seen at least one similar question.

However I am interested in what is the pattern for redux usage in a react native application having a ListView. Should the reducers create a new ListView.Datasource every time? Will this cause performance problems etc., as is probably asked by the question I pointed out? Or should I just take a deviation and call setState({datasource : new ListView.Datasource()}) from componentWillReceiveProps() of the component that has the ListView?

Answer 1

I went the componentWillRecieveProps route. Given the cloneWithRows needs a new object each time its updated (depending on how you use rowHasChanged), one needs to pass a new set of data to it. Luckily with redux reducers, this kind of pattern is expected anyways in terms of the data you return.

Here's how i did it in an app of mine:

componentWillReceiveProps(newProps) {
  let days = newProps.days;
  if (newProps.viewingDayUuid !== this.props.viewingDayUuid) {
    days = days.map((day) => {
      if (day.uuid === newProps.viewingDayUuid || day.uuid === this.props.viewingDayUuid) {
        return Object.assign({}, day);
      } else {
        return day;
      }
    });
  }
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(days)
  });
}

The if block you can ignore, that's me deciding to make a new day object if the current selected (highlight state) nav item in a list view needs to change. Instead of returning whole new objects each time