Handling normalized data for displaying in the page - redux - reactjs

Question

Consider that i have the normalized object like this in redux store
{
"entities": {
"listings_by_id": {
"1": {
"id": 1,
"address": "991 Folsom St, San Francisco, CA 94107, USA",
"info": "Triplex 4,000 sqft",
"cap": "7.1",
"position": {
"lat": 37.778519,
"lng": -122.40564
}
},
"2": {
"id": 2,
"address": "1139004, San Francisco, CA 94118, USA",
"info": "Duplex 1,500 sqft",
"cap": "6.8",
"position": {
"lat": 37.768519,
"lng": -122.43564
}
}
}
},
"result": [
1,
2
]
}
In want to display the property list in the UI. Something like
Triplex 4,000 sqf
CAP RATE: 7.1
Duplex 1,500 sqft
CAP RATE: 6.2
Do i need to denormalize again for displaying in UI? If yes, where do i handle this - mapStateToProps?
Any help would be much appreciated.

Answer 1

You can add result into mapStateToProps and then iterate it like this
return this.props.result.map(a=>{
return <><div>{state.entities.listings_by_id[a].info}</div><div>{state.entities.listings_by_id[a].cap}</div></>
})
Here result should be mapped like this
const mapStateToProps = (state) => ({
result:state.reducername.result
});
and state.entities is the store
import store from 'path/ReactReducers/store';
state.entities should be replaced as store.getState().reducername.

Answer 2

As Justcode said above, the best way is handle that on mapStateToProps function. I created a codepen to show you how to do it. https://codepen.io/aquilesb/pen/bOKrzP
//Import any modules from libraries
const { Provider, connect } = ReactRedux;
const { createStore } = Redux;
// initial state
const initialState = { test:{
"entities": {
"listings_by_id": {
"1": {
"id": 1,
"address": "991 Folsom St, San Francisco, CA 94107, USA",
"info": "Triplex 4,000 sqft",
"cap": "7.1",
"position": {
"lat": 37.778519,
"lng": -122.40564
}
},
"2": {
"id": 2,
"address": "1139004, San Francisco, CA 94118, USA",
"info": "Duplex 1,500 sqft",
"cap": "6.8",
"position": {
"lat": 37.768519,
"lng": -122.43564
}
}
}
},
"result": [
1,
2
]
}};
// create store
let store = createStore(state => state, initialState);
const ReduxTextField = ({ entities }) =>(
<ul>
{ Object.entries(entities).map((entity) =>(
<li>
<div><span style={{marginRight:'10px'}}>Info:</span>{entity[1].info}</div>
<div><span style={{marginRight:'10px'}}>CAP:</span>{entity[1].cap}</div>
</li>
))}
</ul>)
const mapStateToProps = function (state) {
return {
entities: state.test.entities.listings_by_id
}
}
//shorter way to write mapStateToProps
//const mapStateToProps = state => ({ entities: state.test.entities.listings_by_id })
const ReduxTextFieldContainer = connect(mapStateToProps, null)(ReduxTextField);
//Create teh app component which contains the button and text field
class App extends React.Component {
render() {
return (
<div>
<ReduxTextFieldContainer />
</div>
)
}
}
//Finally render to DOM!
ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<div id="root"></div>