Как сравнить реквизиты в ComponentDidUpdate для большой структуры данных, связанной с Redux

Question

Я работаю с новыми жизненными циклами React v16. Это прекрасно работает, когда мы сравниваем только один ключ. Но когда дело доходит до сравнения больших структур данных, таких как массивы объектов, глубокое сравнение станет очень дорогостоящим.

У меня есть такой пример использования, в котором у меня есть массив объектов ob, хранящихся в избыточном,

const readings =[
{
id: ...,
name: ...',
unit:...,
value: ...,
timestamp: ...,
active: true,
 },
 ...
]

Всякий раз, когда изменяется активное состояние каких-либо объектов, я отправляю действие, чтобы обновить состояние избыточности так, чтобы оно было одинаковым для всех подключенных компонентов с этим редуктором.

class Readings extends Component {
  state = {
    readings:[],
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if ( // comparsion of readings array with prevState) {
      return {
        readings: nextProps.readings,
      };
    }
    return null;
  }

  componentDidUpdate(prevProps) {
    if ( // comparsion of readings array with prevState) {
      // perform an operation here to manipulate new props and setState to re render the comp
      // this causes infinite loop
    }
  }

  render() {
   ...
  }
}

const mapStateToProps = state => ({
  readings: state.readings.readings,
});


export default connect(
  mapStateToProps,
)(Readings));

Как я могу избежать бесконечного цикла на setState в componentDidUpdate, я не хочу делать глубокое сравнение массива чтений. Есть ли лучшее решение для этого случая?

Ваши предложения будут высоко оценены.

Answer 1

В идеале вы вносите неизменные изменения в свой редуктор и сохраняете низкий уровень состояния редуктора.

Таким образом, если ваш массив состоит из множества объектов, и вам необходимо выполнить диспетчеризацию на основе какого-либо изменения атрибута, вы должны заменить весь массив чтений, используя оператор распространения или некоторую неизменяемую библиотеку, например, immutablejs. Тогда в вашем componentDidupdate у вас может быть что-то вроде:

componentDidUpdate(prevProps) {
   const {
     readings,
   } = this.props
   const {
     readings: prevReadings,
   } = prevProps
  if (readings !== prevReadings) {
      //dispatch something
  }
}

Спасибо, отзывы приветствуются.