React JS: рефакторинг селекторов Redux - PullRequest
Новая
       8

React JS: рефакторинг селекторов Redux

0 голосов
/ 23 ноября 2018

Я использую несколько селекторов, чтобы установить границы, на которых можно установить мои Карты Google.Они в основном возвращают самые низкие и самые высокие точки широты / долготы из данных.Код работает, но я чувствую, что это действительно грязно и может быть пересмотрено, но я не слишком уверен, как.

Вот код: 

const getMinLat = data =>
  data.reduce((prev, current) => {
    return prev.coords[0] < current.coords[0] ? prev : current
  })

const getMaxLat = data =>
  data.reduce((prev, current) => {
    return prev.coords[0] > current.coords[0] ? prev : current
  })

const getMinLng = data =>
  data.reduce((prev, current) => {
    return prev.coords[1] < current.coords[1] ? prev : current
  })

const getMaxLng = data =>
  data.reduce((prev, current) => {
    return prev.coords[1] > current.coords[1] ? prev : current
  })

const getBounds = data => [
  {
    lat: getMinLat(data).coords[0],
    lng: getMinLng(data).coords[1],
  },
  {
    lat: getMaxLat(data).coords[0],
    lng: getMaxLng(data).coords[1],
  },
]

Ответы [ 3 ]

0 голосов
/ 23 ноября 2018

Вы можете сделать его более кратким, используя Array.map(): 

const getCoordsArray = (data, index) =>
  data.map(o => o.coords[index]);

const getMin = (data, index) =>
  Math.min(...getCoordsArray(data, index));

const getMax = (data, index) =>
  Math.max(...getCoordsArray(data, index));

const getBounds = data => [getMin, getMax]
  .map(m => ({
    lat: m(data, 0),
    lng: m(data, 1),
  }));
0 голосов
/ 23 ноября 2018

просто просмотреть список один раз: 

const getBounds = data => 
    data.reduce(
        ([
             {lat: minLat, lng: minLng}, 
             {lat: maxLat, lng: maxLng}
         ], 
         {coords: [lat, lng]}
        ) =>
       [
            {
                lat: Math.min(minLat, lat), 
                lng: Math.min(minLng, lng)
            }, 
            {
                lat: Math.max(maxLat, lat), 
                lng: Math.max(maxLng, lng)
            }
      ], 
      [{lat: Infinity, lng: Infinity}, {lat: -Infinity, lng: -Infinity}]
    )

Я заранее согласен, что удобочитаемость здесь не является преимуществом.Но он проходит список только один раз.

Кроме того, после привыкания к деструктурированию синтаксиса становится ясно, что Math.max и maxLng/maxLat объединяются, чтобы уменьшить возможность использования неправильной переменной

[UPD], и нет необходимости использовать Infinity/-Infinity в качестве начальных значений (я использовал их, чтобы выделить идею позади).для долготы / широты мы можем использовать 180/-180 в качестве наиболее экстремальных значений

0 голосов
/ 23 ноября 2018

Может быть, это 

const getMin = (data, index) =>
  data.reduce((prev, current) => (prev.coords[index] < current.coords[index] ? prev : current))
    .coords[index];

const getMax = (data, index) =>
  data.reduce((prev, current) => (prev.coords[index] > current.coords[index] ? prev : current))
    .coords[index];

const getBounds = data => [
  {
    lat: getMin(data, 0),
    lng: getMin(data, 1)
  },
  {
    lat: getMax(data, 0),
    lng: getMax(data, 1)
  }
];
...