Redux并重新选择并保存缓存的数据

Question

所以，据我所知 - 重新选择有利于不同状态树部分之间的派生状态，或来自不同减速器的派生状态。但是，如果我有类似的东西怎么办？

<ul>
  <li onClick="this.getItems({id: 122})">Item 1
  <li onClick="this.getItems({id: 342})">Item 2
  <li onClick="this.getItems({id: 8767})">Item 3
  <li onClick="this.getItems({id: 12})">Item 4
</ul>

基本上，我没有得到任何状态数据的组合或任何东西，但我想＆＃34;限制＆＃34;通过先前提出的要求拨打电话来重复操作/减少电话呼叫＆＃39;。那么，重新选择对此有好处吗？如果是这样，任何一般的例子。我见过的例子是计算派生状态。我认为解决方案是用memoization / cache函数来装饰我的动作，如果有的话，它会回传先前请求的数据，否则，通过动作调用移动转发。即..

@cachedProductItem
export function getItems({id}) {
  // if id is cached, return it from the decorator wrapped component, else
  // call the action
  return {
    type: .....,
    id
  }
}

Answer 1

重新选择

重新选择用于避免基于状态计算的重新渲染

采取以下代码

const mapStateToProps = ({someStateKeys, someEntity}) => {
  return {
    newProp = someStateKeys.map(key => someEntity[key])
  }
}

即使状态没有改变，map也会返回一个新数组，因此newProp键将无法通过对象相等性检查并强制重新渲染

重新选择memoize提供的createSelector函数如果道具没有改变则返回同一个对象，这样就不会再渲染

使用Redux中间件进行Debouncing操作

您想要做的事情可能是限制可以触发操作的速率。

这将只允许每n ms

触发一次动作

一个简单的中间件可能会喜欢这个

const pending = {};

const debounceMiddleware = () => next => action => {
  const { debounce } = action.meta || {}; 
  if (!debounce) {
    return next(action);
  }
  if (pending[action.type]) { 
    clearTimeout(pending[action.type]);
  }
  pending[action.type] = setTimeout(
    () => {
      delete pending[action.type];
      next(action);
    },
    debounce 
  );
};