您可以使用备忘录。

Question

我的虚构的redux商店看起来像这样：

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

如果范围处于组件的本地状态，该怎么办？我想避免将范围保存在redux存储中。

Answer 1

您可以使用备忘录。

Reselect基本上是Redux的备忘录帮助器。您可以在组件内部（或基本上在任何地方）使用相同的技术。如果您不熟悉read here的概念。

您可以使用所需的任何库，甚至可以自己滚动（这很简单）。 React集成非常简单：您从render方法中提取计算逻辑到另一个方法，将备忘录应用于提取的函数，并从{{ 1}} 。官方文档here中有一个 React + memoize-one 示例。

根据组件的本地状态从Redux存储动态计算/派生数据的最佳方法

1 个答案:

您可以使用备忘录。