0

我有这个项目列表，每个项目在单击时都会将 state.ui.clickedItem 更改为单击的项目本身。我想计算项目的关联分配记录。

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

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 --> 相同的 Assignments 不可变数组 && 在项目 ID 之前从未见过 --> 计算项目的分配和 console.log

用户点击 B 项 --> 同上

用户单击项目 A（再次）-> 之前看到的相同分配数组 && 项目 ID-> 没有计算，只需从缓存中获取它并且没有 console.log

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

谢谢！

4

1 回答 1

0

看起来您可能会在每次调用时重新创建选择器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
于 2016-06-02T15:35:13.083 回答