Redux Store to store the result of the calculation or the received initial data?

Question

JavaScript

Good afternoon!
What is the best way to store the data in the Redux Store, the one we got from the API, the raw data or the already computed data needed for output?
For example, the page displays three values ​​in separate components Value1 , Value2 , Value3 .
These values ​​are computed, i.e. for each of these values, several API requests are made to calculate them to obtain the necessary data. Those.
Value1 - request data 1 (for example, array [{id: 1, count: 1, amount: 100, ...}]) count=1, request data 2 that depends on request 1.
Value2 - request data 1 (for example, array [{id: 1, count: 1, amount: 100, ...}]) amount = 100, request data 3
Value3 - request data 4.
In addition to everything, Node.js sends more notifications about the changed data. Those. an event arrives that the element with id=1 has changed in the data, and this data itself: {id: 1, count: 2, amount: 100, ...}. After that, it is necessary to recalculate Value1 and Value2 , because the element with id=1 has changed
How is it better to organize, because in the case of already calculated values, we have very simple components tied to the redux store:

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

But here's how to control the changed data in this case? Recompute both Value1 and Value2 , and in case of change, only then do dispatch with the new computed value? After all, if there was raw data, then I would change the array and the values ​​would be recalculated themselves, here I mean:

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)

The first option looks more attractive, of course, but how to organize it, how to control changes in raw data in order to calculate only the necessary values ​​\u200b\u200band put them in the redux store?
Thank you!

Answer 1

I would put already calculated data in the store so that there would be no calculations when rendering components.
I would process the array received in the first request into the form of an object, namely, approximately in the following form:

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

Then it will be easy to change individual elements in the state for other requests.
store.items[itemId] = {...oldObj, newObj}
It's hard for me to understand your query scheme, because it's written in a not very clear language (for me personally).