定义重置选择器以在多个组件实例之间进行记录

编程问答 2022-06-05

问题描述

我希望使用redux reselect lib来编写我的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

解决方法

该示例将永远不会记住，因为它每次运行mapState时都会创建一个新的选择器实例。

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

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

如果创建一个新的选择器实例，则该实例没有缓存值。如果您具有相同的实例，但是每次调用它时都传递 different 值，则该备注永远不会起作用。

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

javascriptreactjsreactjsreactjsreactjsreduxreduxreduxreduxreselectreselectreselect