Question

我有这个项目列表，每次点击时都会将state.ui.clickedItem更改为该被点击的项目本身。我想计算物品＆＃39;相关的作业记录。

所以我有这个重选选择器：

import { createSelector } from 'reselect';

export const getAssignments       = state => state.assignments
export const getClickedLineItemId = state => state.ui.clickedItem.id

export const makeClickedLineItemAssignment = () => {

  return createSelector(
    [ 
      getAssignments,       //Line 3
      getClickedLineItemId, //Line 4
    ],
    ( 
      assignments,
      lineItemId
    ) => {
      console.log("should only show if the clicked item is clicked for the first time")
      return assignments.filter(assignment =>  assignment.line_item_id === lineItemId)
    }
  )

}

我认为备忘录会使行为成为：

用户点击项目A - ＆gt;相同的赋值不可变的数组＆amp;＆amp;项目ID之前从未见过 - ＆gt;计算项目的分配和console.log

用户点击项目B - ＆gt;与上述相同

用户点击项目A（再次） - ＆gt;相同的作业数组＆amp;＆amp;之前看过的商品ID - ＆gt;没有计算，只是从缓存中获取它并且没有console.log

这是我的预期，但是，我得到的是每次点击都会重新计算过滤和console.logging。任何人都可以在我的重新选择代码中看到任何错误吗？

谢谢！

Answer 1

看起来您每次拨打makeClickedLineItemAssignment时都可能正在重新创建选择器。这是一个返回接受状态的函数的函数。所以你必须像这样使用它：

const selector = makeClickedLineItemAssignment();
selector(state);
selector(state);

如果你这样做，你会看到选择器被正确记忆。但是，每当状态在makeClickedLineItemAssignment中发生变化时，您的应用可能会调用mapStateToProps，这意味着您每次都会获得不同的功能。而是尝试直接导出选择器：

export const makeClickedLineItemAssignment = createSelector(
  [
    getAssignments,       //Line 3
    getClickedLineItemId, //Line 4
  ],
  (
    assignments,
    lineItemId
  ) => {
    console.log("should only show if the clicked item is clicked for the first time")
    return assignments.filter(assignment =>  assignment.line_item_id === lineItemId)
  }
);

输出：

willy@localhost:~/$ babel-node test.js 
First
should only show if the clicked item is clicked for the first time
Second

redux reselect保持重新计算

1 个答案: