我想创建一个带有memoization的选择器,使用基于某些ownProps的重新选择mapStateToProps.
您可以使用react-reduxconnect提供的方法将选择器连接到组件,然后将组件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;
然后,您可以在选择器中访问这些道具
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每次都会收到一个不同的参数,因此它总是会重新计算而不是返回一个缓存的值.
要在传递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;
如果mapStateToProps提供给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选择器获得自己的功能.无论容器的渲染顺序如何,Memoization现在都能正常工作.
这是从Reselect文档中修改(blatently复制)
![leetcode: houserobber [打家劫舍] 递归法、动态规划、滚动数组](https://img.php1.cn/3cdc5/9b88/cd5/36a0d525cfdfaa5d.png)
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有