What is the best way to store data in the Redux Store, the data that we received from the API are raw data or 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, to calculate them, several API requests are performed to obtain the necessary data. Those.

Value1 - request data 1 (for example, array [{id: 1, count: 1, amount: 100, ...}]) count = 1, request data 2 which depend 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 all, Node.js sends more notifications about changed data. Those. an event comes that the element with id = 1 has changed in the data, and the data itself: {id: 1, count: 2, amount: 100, ...}. After that, it is necessary to recompute Value1 and Value2 , since element with id = 1 changed

It’s still better to organize, because in the case of already computed values, we have very simple components associated with 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 how in this case to control the changed data? Reassign both Value1 and Value2, and in the case of a change, only then do dispatch with a new calculated value? After all, if there were raw data then I would make an array change and the values ​​themselves would be recalculated, 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 certainly more attractive, but how to organize it, how to control changes in raw data, to calculate only the necessary values ​​and put in the redux store?

  • I would not be surprised if someone understood you, but personally it seems to me that you are either not at all aware of what redux is, or vice versa in the course, and just decided to play a trick on everyone. If the first, then start small and read the articles, of which just dofigische to understand what redux is, and then documentation. Your question sounds like - what you need to do so that the elephant has a trunk. - user220409
  • @OlmerDale Could you explain in more detail what confuses you in the question? - IDD
  • You ask how to do that, for which they praise and why redux was created. If I understand correctly, then you ask how to update the status of the application. But if I understood this correctly, then I mean right in the first comment. - user220409
  • Now I looked at the code and I can say that the components should not perform any calculations on the data they receive. You can still imagine that in a free programming style on redux, some calculations about the internal state of the component itself, not the data, can be done in the component itself, but no more. - user220409
  • Thanks for the answer. But, here I can't figure out how to control these calculated values? For example, to calculate the Value1, I need data from query 1 (data1: [{id: 1, count: 1}, ...]) and query 2 (data2). I calculated Zanchenie1 = calculate (data1, data2). Then I receive an event that the object with id = 1 has changed, and this object itself comes: {id: 1, count: 2}. Next, I need to recalculate Value1, but already with the modified value id = 1 in data1. This is a simple example. But here's what to do if some more values ​​depend on this id = 1. For each value, remember that it depends on id = 1? - IDD

0