Лучший способ динамически вычислять / извлекать данные из избыточного хранилища на основе локального состояния компонента - PullRequest
Новая
       7

Лучший способ динамически вычислять / извлекать данные из избыточного хранилища на основе локального состояния компонента

0 голосов
/ 10 января 2019

Мой вымышленный магазин редуксов выглядит так: 

// array of temperature measured every 4 hrs
{
  temp: [
    { t: 1547078400, c: 15 },
    { t: 1515528000, c: 16 },
    { t: 1515513600, c: 12 },
    { t: 1515499200, c: 10 },
    ...
    { t: 1546819200, c: 21 },
  ]
}

У меня есть виджет, который позволяет вам видеть самую низкую температуру, измеренную «сегодня», «на этой неделе», «в этом месяце» (пользователь может выбрать диапазон, нажимая кнопки)

Мой код повторного выбора будет выглядеть примерно так: 

// Filter points if the time is within the specified range
const getHistory = (store, range) => 
   store.temp.filter(p => p.t < range.to && p.t > range.from);

// Get the points in the range and then find the min
const findMinTemp = (store, range) => createSelector(
  [getHistory],
  filteredPoints => filteredPoints.reduce(
    (minSoFar, point) =>  point.c < minSoFar.c ? point : minSoFar)
  )
)

Проблема Вышеупомянутый селектор будет работать, если диапазон будет передан как опора. 

// Dashboard.js
<MyComponent to={...} from={...} />

// MyComponent.js
const mapStateToProps = (state, props) => ({
    min: findMinTemp(state, props)
})

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

1 Ответ

0 голосов
/ 10 января 2019

Вы можете использовать памятку.

Повторный выбор - это, по сути, помощник по напоминанию для Redux. Вы можете использовать ту же технику внутри вашего компонента (или где угодно). Если вы не знакомы с понятием , прочитайте здесь .

Вы можете использовать любую библиотеку, которую хотите, или даже свернуть свою собственную (это очень просто). Реактивная интеграция проста: Вы извлекаете вычислительную логику из вашего render метода в другой, применяете памятку к извлеченной функции и вызываете , что из render , В официальных документах есть React + memoize-one , здесь .

...