Redux Store хранить результат вычислений или полученные начальные данные?

Question

[IDDH]

Добрый день!
Как лучше всего хранить данные в Redux Store, те которые мы получили из API сырые данные или уже вычисленные, необходимые для вывода данные?

Например, на странице выводятся в отдельных компонентах три значения Значение1, Значение2, Значение3.
Эти значения являются вычисляемыми, т.е. для каждого из этих значений для их вычисления происходит по несколько своих API запросов для получения необходимых данных. Т.е.
Значение1 - данные запроса 1(например, массив [{id: 1, count: 1, amount: 100, ...}]) count=1, данные запроса 2 которые зависят от запроса 1.
Значение2 - данные запроса 1(например, массив [{id: 1, count: 1, amount: 100, ...}]) amount = 100, данные запроса 3
Значение3 - данные запроса 4.

В дополнение ко всему Node.js присылает еще извещения о изменившихся данных. Т.е. приходит ивент, что в данных изменился элемент с id=1, и сами эти данные: {id: 1, count: 2, amount: 100, ...}. После чего и необходимо перевычислить Значение1 и Значение2, т.к. изменился элемент с id=1

Как все же лучше организовывать, ведь в случае с уже вычисленными значениями мы имеем очень простые компоненты привязанные к redux store:

class Container1 extends Component {
  render() {
    let { value1 } = this.props;
    return (
      <div>
        {value1}
      </div>
    ) 
  }
}
connect(function(state) {
  return {
    value1: state.value1
  }
}
)(Container1)

Но вот как в этом случае контролировать изменившиеся данные? Перевычилять и Значение1 и Значение2, и в случае изменения, только тогда делать dispatch с новым вычисленным значением? Ведь если бы были сырые данные тогда я бы сделал изменение массива и значения бы сами перевычислились, здесь я имею ввиду:

class Container1 extends Component {
  render() {
    let { fetchedData1, fetchedData2} = this.props;
    let value1 = Service.calculateValue1(fetchedData1, fetchedData2);

    return (
      <div>
        {value1}
      </div>
    ) 
  }
}
connect(function(state) {
  return {
    fetchedData1: state.fetchedData1,
    fetchedData2: state.fetchedData2
  }
}
)(Container1)

Первый вариант смотриться конечно более привлекательнее, но вот как его организовывать, как контролировать изменения в сырых данных, чтобы вычислять только нужные значения и ложить в redux store?

Спасибо!

Answer 1

[edk55]

Я бы в store клал бы уже вычисленные данные, чтобы не происходило вычислений при рендеринге компонентов.
Получаемый в первом запросе массив я бы обработал в вид объекта, а именно, примерно в такой вид:

{
1: {
  id: 1,
  count: 1,
  amount: 100
},
2: {
  id: 2,
  count: 52,
  amount: 1200
}
}

Тогда будет просто изменять отдельные элементы в state при остальных запросах.
store.items[itemId] = {...oldObj, newObj}
Вашу схему запросов мне понять сложно, ибо написано не очень понятным языком (лично для меня).

Comments

[IDDH]

Спасибо за ответ. Немного не понял, Вы говорите о том, что нужно хранить вычисленные значения(в вопросе я имел ввиду, что это, например, сумма по всем элементам count в массиве, или по amount), но в пример приводите обработанные сырые данные приведенные к форме обекта по id?

[IDDH]

Схема запросов. Например, для вычисления Значения1 мне необходимы данные из запроса 1 (data1: [{id:1, count:1}, ...]) и запроса 2(data2). Я вычислил Занчение1 = calculate(data1, data2). Далее мне приходит событие, что изменился объект с id=1, и приходит сам этот объект: {id:1, count:2}. Далее мне нужно пересчитать Значение1, но уже с измененным значением id=1 в data1. Это простой пример. Но вот что делать если еще некоторые значения зависят от id=1. Для каждого значения запоминать, что он зависит от id=1?