为跨多个组件实例的记忆定义重置选择器

Question

我希望使用 redux reselect 库来编写我的 react-redux 选择器。在文档中有 this section that 描述了如何编写可供多个组件实例使用的选择器。

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { makeGetVisibleTodos } from '../selectors'

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos() // here
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  makeMapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

我想知道 makeGetVisibleTodos 选择器调用方式的差异（如下所示）是否对记忆的工作方式有影响。记忆仍然有效吗？如果不能，为什么？

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { makeGetVisibleTodos } from '../selectors'

const makeMapStateToProps = () => {
  const mapStateToProps = (state, props) => {
    return {
      todos: makeGetVisibleTodos()(state, props) // and here
    }
  }
  return mapStateToProps
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  makeMapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

Answer 1

该示例根本不会记忆，因为它会在每次 mapState 运行时创建一个新的选择器实例。

正确使用记忆选择器的关键是：

多次重复使用同一个选择器实例
并继续传递相同的参数

如果您创建一个新的选择器实例，它没有缓存值。如果您有相同的实例，但每次调用它时都会传递 不同的 值，那么记忆永远不会起作用。

更多详细信息，请参阅我的 post Using Reselect Selectors for Encapsulation and Performance。

为跨多个组件实例的记忆定义重置选择器

Defining reset slectors for memoization across multiple component instances

javascript

reactjs

redux

reselect