Question

我正在阅读Redux的文档，但却被reselect困住了。下面的代码创建了一个选择器，文档说，如果我们想在两个VisibleTodoList组件中使用它，那么它将无法正常。

import { createSelector } from 'reselect'

const getVisibilityFilter = (state, props) => state.todoLists[props.listId].visibilityFilter

const getTodos = (state, props) => state.todoLists[props.listId].todos

const getVisibleTodos = createSelector([getVisibilityFilter, getTodos], (visibilityFilter, todos) => {
  switch (visibilityFilter) {
    case 'SHOW_COMPLETED':
      return todos.filter(todo => todo.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(todo => !todo.completed)
    default:
      return todos
  }
})

export default getVisibleTodos

将getVisibleTodos选择器与visibleTodoList容器的多个实例一起使用将无法正确记忆

const mapStateToProps = (state, props) => {
  return {
     // WARNING: THE FOLLOWING SELECTOR DOES NOT CORRECTLY MEMOIZE
     todos: getVisibleTodos(state, props)
  }
}

这是什么意思？我无法弄清楚为什么它不起作用。

Answer 1

正确。这是因为默认情况下重新选择只会记忆最新的一组输入：

const a = someSelector(state, 1); // first call, not memoized
const b = someSelector(state, 1); // same inputs, memoized
const c = someSelector(state, 2); // different inputs, not memoized
const d = someSelector(state, 1); // different inputs from last time, not memoized

在这些情况下，选择器仍然会检索数据，它只需要重新计算结果，即使它在过去的某个时刻看到了输入。

因此，如果您在mapState函数中使用选择器，并且它引用ownProps中的值，那么该组件的多个实例可能会导致选择器永远不会正确记忆

const mapState = (state, ownProps) => {
    const item = selectItemForThisComponent(state, ownProps.itemId);

    return {item};
}


// later
<SomeComponent itemId={1} />
<SomeComponent itemId={2} />

在该示例中，selectItemForThisComponent始终会被(state, 1)和(state, 2)背靠背调用，因此无法正确记忆。

一种解决方案是使用connect支持的“工厂功能”语法。如果您的mapState函数在第一次调用时返回一个函数，connect将使用它作为真正的mapState实现。这样，您可以为每个组件实例创建唯一的选择器：

const makeUniqueSelectorInstance = () => createSelector(
    [selectItems, selectItemId],
    (items, itemId) => items[itemId]
);    


const makeMapState = (state) => {
    const selectItemForThisComponent = makeUniqueSelectorInstance();

    return function realMapState(state, ownProps) {
        const item = selectItemForThisComponent(state, ownProps.itemId);

        return {item};
    }
}

export default connect(makeMapState)(SomeComponent);

组件1和组件2都将获得自己唯一的selectItemForThisComponent副本，并且每个副本都将通过一致的可重复输入进行调用，从而允许正确的记忆。

<强>更新

我在我的博文Idiomatic Redux: Using Reselect Selectors for Performance and Encapsulation中扩展了这个答案。

重新选择将无法正确记忆同一组件的多个实例

1 个答案: