Экран не рендеринг, даже реквизиты изменились?

Question

В настоящее время я сталкиваюсь с проблемой, когда экран не перерисовывается, чтобы загрузить новое добавленное значение в массив.Даже попытка с помощью componentWillReceiveProps и триггера this.forceUpdate() вручную не помогает.На экране отображается новое значение только при перезапуске приложения

this.props.addNewRecord({ 
    recordDetails: { ...this.props.recordDetails, type: this.state.type },
    records: this.props.records
  });

return (
  <View>
    {
      this.props.records.map((x, i) => {
        return (
          <View style={{ flexDirection: 'row' }}>
            <Text>{`${i}: `}</Text>
            <Text>{x.id}</Text>
          </View>
        );
      })
    }
  </View>
);

const mapStateToProps = ({ account, settings, main }) => {
  const year = moment().year();
  const month = moment().format('MMM');

  return {
    records: account.records[year][month].records,
  };
};

export default connect(mapStateToProps)(SummaryScreen);

account.records имеет следующую структуру

{
  2018: {
    Jan: {
      records: [{...}, {...}]
    }
  }
}

А ниже добавлена ​​часть записи

const addNewRecord = ({ recordDetails, records }) => {
  const year = moment(recordDetails.date).year();
  const month = moment(recordDetails.date).format('MMM');

  const newRec = {
    id: uuidv4(),
    account_id: recordDetails.account_id,
    date: recordDetails.date,
    description: recordDetails.description,
    amount: recordDetails.result,
    type: recordDetails.type
  };

  update(year, month, newRec, records);

  return {
    type: ADD_NEW_RECORD,
    payload: records
  };
};

const update = (year, month, obj, target) => {
  [year, month].reduce((r, e, i, a) => {
    if (!a[i + 1] && r[e]) {
      r[e].records.push(obj);

      if (obj.type === 'expense') r[e].totalExpenses = parseFloat(r[e].totalExpenses) + parseFloat(obj.amount);
      if (obj.type === 'income') r[e].totalIncome = parseFloat(r[e].totalIncome) + parseFloat(obj.amount);
    }
    return r[e] = (r[e] || (a[i + 1] ? {} : {
      records: [obj],
      totalExpenses: obj.type === 'expense' ? parseFloat(obj.amount) : 0,
      totalIncome: obj.type === 'income' ? parseFloat(obj.amount) : 0,
      type: obj.type
    }));
  }, target);
};

и редуктор, как показано ниже:

switch (action.type) {
  case ADD_NEW_RECORD:
    return { ...state, records: action.payload };

Answer 1

this.props.addNewRecord({ 
  recordDetails: { ...this.props.recordDetails, type: this.state.type },
  records: _.cloneDeep(this.props.records)//this.props.records
});

Проблема в том, что я передал this.props.records как records, который впоследствии мутирует, и в конечном итоге старое состояние видоизменяется так же, как новое состояние, и поэтому Redux не может обнаружить различия.

Кредиты @ Y.Gherbi для обнаружения этого недостатка.Надеюсь, это поможет тому, кто столкнется с той же проблемой