Redux重新选择备忘录是如何工作的？ [英] How does Redux Reselect memoization work?

问题描述

我正在尝试将reselect集成到我当前的应用程序中，像往常一样，首先我会开始阅读文档，然后如果需要，还会有另一个资源。我不能理解文档中的某个特殊部分，也找不到可以更清楚地解释的资源。现在我在这里得到一些清楚的解释。 所以它在文档中说`

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <VisibleTodoList listId="1" />
    <VisibleTodoList listId="2" />
    <VisibleTodoList listId="3" />
  </div>
)

将getVisibleTodos选择器与多个 VisibleTodoList容器将无法正确记录：

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

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

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

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

export default VisibleTodoList

使用createSelector创建的选择器的高速缓存大小为1且仅 当缓存值的参数集与其 上一组参数。如果我们交替呈现 <VisibleTodoList listId="1" />和<VisibleTodoList listId="2" />， 共享选择器将在接收{listId: 1}和 {listId: 2}作为其道具参数。这将导致参数为 每次调用都不同，因此选择器将始终重新计算 返回缓存值。

注意最后一句。如果我们传递不同的id%s，为什么要返回缓存值，而它应该根据id%s返回不同的值？

推荐答案

因此我们有此选择器获取VisibleTodoList组件的状态：

const mapStateToProps = (state, props) => {
  return {
    todos: getVisibleTodos(state, props)
  }
}

如果呈现组件：

return (
    <div>
        <VisibleTodoList listId="1" />
    </div>
)

然后，选择器被调用如下：getVisibleTodos(state, { listId: 1 })，并且选择器在内存中存储(记录)结果(待办事项列表1对象)。

如果我们使用相同的道具渲染组件两次：

return (
    <div>
        <VisibleTodoList listId="1" />
        <VisibleTodoList listId="1" />
    </div>
)

1. 调用选择器并记录结果

2. 选择器被第二次调用，它发现{ listId: 1 }与第一次是相同的参数，因此它只返回带记忆的值。

如果我们使用不同的道具呈现组件两次：

return (
    <div>
        <VisibleTodoList listId="1" />
        <VisibleTodoList listId="2" />
    </div>
)

1. 调用选择器并记录结果

   /li>

2. 选择器被第二次调用，它发现{ listId: 2 }与第一次调用的参数不同，因此它在内存中重新计算并记录新结果(待办事项列表2对象)(覆盖以前的记录)。

如果希望每个组件都有自己的备忘，则每个组件实例必须有自己的选择器实例。

例如：

// selector
const makeGetVisibleTodos = () => createSelector(
    // ... get the visible todos
);

// each has their own memoization space:
const foo = makeGetVisibleTodos(); // this is an instance
const bar = makeGetVisibleTodos(); // this is a separate instance

因此将其应用于组件：

// component
const mapStateToProps = () => {
    const getVisibleTodos = makeGetVisibleTodos(); // this instance get bound to the component instance

    return (state, props) => {
        return {
            todos: getVisibleTodos(state, props)
        }   
    }
}

现在，如果我们使用不同的道具呈现组件两次：

return (
    <div>
        <VisibleTodoList listId="1" />
        <VisibleTodoList listId="2" />
    </div>
)

1. 使用<VisibleTodoList listId="1" />调用选择器的第一个实例并记录结果

2. WITH<VisibleTodoList listId="2" />调用选择器的另一个实例并记录结果

这篇关于Redux重新选择备忘录是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！