Обработка нормализованных данных для отображения на странице - redux

Question

Считайте, что у меня есть нормализованный объект, подобный этому, в хранилище резервов

{
  "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
  ]
}

Для отображения списка свойств в пользовательском интерфейсе. Что-то вроде

Triplex 4,000 sqf
CAP RATE: 7.1

Duplex 1,500 sqft
CAP RATE: 6.2

Нужно ли снова денормализовать для отображения в пользовательском интерфейсе? Если да, где я могу это обработать - mapStateToProps?

Любая помощь будет высоко ценится.

Answer 1

Как сказал выше Justcode, лучший способ это обработать в функции mapStateToProps. Я создал кодовую ручку, чтобы показать вам, как это сделать. 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>

Answer 2

Вы можете добавить result в mapStateToProps, а затем iterate вот так

 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></>
   })

Здесь результат должен отображаться так:

const mapStateToProps = (state) => ({
    result:state.reducername.result
});

и state.entities - это магазин

import store from 'path/ReactReducers/store';

state.entities следует заменить на store.getState().reducername.