如何在redux上使用reselect获取ownProps？

Question

我想创建一个基于mapStateToProps的一些ownProps的带有memoization的选择器。

Answer 1

为此，可以使用react-redux提供的connect方法将选择器连接到组件，然后将组件属性(ownProps)作为第二个参数传递给选择器。

container.js

import { connect } from 'react-redux';
import { getVisibleTodos } from './selectors';

...

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

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

export default VisibleTodoList;

然后你可以在你的选择器中访问这些道具。

selectors.js

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(
  ...
);

export default getVisibleTodos;

然而，如果你要传递道具的组件有多个实例，这将不能正确地记忆

。在这种情况下，选择器每次都会收到一个不同的props参数，所以它总是会重新计算，而不是返回一个缓存值。

要在多个组件之间共享选择器，同时传入保留memoization的属性和，组件的每个实例都需要自己的选择器私有副本。

您可以通过创建一个函数来实现这一点，该函数在每次调用时都会返回选择器的一个新副本。

selectors.js

import { createSelector } from 'reselect';

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

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

const makeGetVisibleTodos = () => {
  return createSelector(
    ...
  );
}

export default makeGetVisibleTodos;

如果为connect提供的 mapStateToProps 参数返回的是函数而不是对象，则它将用于为容器的每个实例创建单独的函数。

考虑到这一点，您可以创建一个函数makeMapStateToProps来创建一个新的getVisibleTodos选择器，并返回一个对新选择器具有独占访问权限的mapStateToProps函数：

import { connect } from 'react-redux';
import { makeGetVisibleTodos } from './selectors';

...

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

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

export default VisibleTodoList;

现在，VisibleTodosList容器的每个实例都将拥有自己的mapStateToProps函数和一个私有的getVisibleTodos选择器。无论容器的渲染顺序如何，记忆现在都可以正常工作。

这是从Reselect documentation改编的(明目张胆地复制)