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

Question

我想使用基于 mapStateToProps 的某些 ownProps 的重新选择来创建一个具有内存功能的选择器。

Answer 1

您可以通过使用 react-redux 提供的 connect 方法将选择器连接到组件来实现此目的。 ，然后将组件 props (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;

然后您可以在选择器中访问这些 Prop

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;

However, this will not memoize correctly if you have multiple instances of the component you're passing props from. In that case, the selector would receive a different props argument each time, so it would always recompute instead of returning a cached value.

要在多个组件之间共享选择器，同时传入 Prop 和保留内存，组件的每个实例都需要自己的选择器私有(private)副本。

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

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 参数返回一个函数而不是对象，它将用于为每个实例创建一个单独的 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 函数以及私有(private) getVisibleTodos 选择器。无论容器的渲染顺序如何，内存现在都可以正常工作。

<小时/>

这是改编自 Reselect documentation 的(公然复制)