Strategies for rendering relational data in react (stored in redux)

user_3154872 0
Viewed 98

Lets say I have a table whose columns are symbol, name, and last price. A sample row might be 'AMZN', 'Amazon', 1736.00. The symbol and name data originates from some api 'symbol-to-name-service' , while another api provides symbol and price info ('symbol-to-price-service') .

Symbols are universally unique. The symbol->name mapping is held in one slice of redux state, while the symbol -> price mapping is held in another slice.

To display a row, I need to join my price data with my name data on the symbol.

What is a good strategy for rendering relational data of this flavor, where data on one side of the relationship changes often.

redux reactjs
1 Answers

you can build a middleware that merges the to slices and store it on a shared one,hence your component should not know about how the data is being collected or what's the relation between them.

example : 

export default ({ getState, dispatch }) => (next) => (action) => {

 if(sliceA_and_SliceB_actions.includes(action.type)) 
 cosnt {sliceA, sliceB} = getState()
  dispatch({
   type: UPDATE_SLICE_C,
   payload: {sliceA,sliceB}
  })

  next()
}
user_99769670
Related