处理规范化数据以在页面中显示 - redux答案

【问题标题】：Handling normalized data for displaying in the page - redux处理规范化数据以在页面中显示 - redux
【发布时间】：2019-06-02 19:11:01
【问题描述】：

考虑到我在 redux 商店中有这样的标准化对象

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

想要在 UI 中显示属性列表。类似的东西

Triplex 4,000 sqf
CAP RATE: 7.1

Duplex 1,500 sqft
CAP RATE: 6.2

我是否需要再次反规范化才能在 UI 中显示？如果是，我在哪里处理这个 - mapStateToProps？

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs redux normalizr

【解决方案1】：

您可以将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.

【讨论】：

【解决方案2】：

正如上面 Justcode 所说，最好的方法是在 mapStateToProps 函数上处理它。我创建了一个 codepen 来向您展示如何做到这一点。 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>

【讨论】：