在reducer中访问标准化数据

时间:2019-01-08 05:22:18

标签: reactjs redux normalizr

从后端返回的数据如下。

[
          {
            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.405640 }
          },
          {
            id: 2,
            address: '1139004, San Francisco, CA 94118, USA',
            info: 'Duplex 1,500 sqft',
            cap: '6.8',
            position: { lat: 37.768519, lng: -122.435640 }
          }
        ]

用于规范化数据的reactjs代码如下。

import axios from '../../../util/axios';
import * as schema from '../../../schema';
import { normalize } from 'normalizr';

const normalizePropertyList = response => normalize(response.data.listings_by_id, [schema.propertyList]);

export const getPropertyList = () => axios.get('/api/v1/properties').then(normalizePropertyList);

模式定义如下。

import { normalize, schema } from 'normalizr';

export const propertyList = new schema.Entity('listings_by_id', {}, { idAttribute: 'id' });

返回的归一化数据如下。

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

现在在减速器中,我需要使用选择器访问此数据。我对如何实现这一点感到困惑。

任何帮助将不胜感激。

0 个答案:

没有答案