重新选择库正在返回一个函数

Question

我是第一次尝试使用 reselect 库，我觉得我正在按照示例进行操作，但显然我遗漏了一些东西。当我尝试使用它时，mapStateToProps 认为我正在返回一个函数而不是我正在执行的对象。

谁能告诉我我漏掉了哪一步？我已经看过几次了，似乎无法确定我遗漏了什么。谢谢。

// 初始 redux 状态

data: {
  pageDict: {
    id1: { name: 'somePage1', ... }, id2: { name: 'somePage2', ... }
  }
}

// selectors.js

const getPageDict = state => state.data.pageDict;

export const getPage = (state, props) => createSelector(
  [getPageDict],
  (pageDict) => {
    return pageDict[props.pageId];
  }
);

// MyComponent.js

const mapStateToProps = (state, ownProps) => {
  return {
    page1: getPage(state, ownProps),  // this causes an error as it thinks I'm returning a function
    page2: state.data.pageDict[ownProps.pageId]  // this works fine
  };
};

Answer 1

您的 getPage 函数当前定义为 "a function that takes (state, props), and returns a new selector"。那是错误的语法和方法。相反，您应该将 getPage 定义为 "a selector function generated by createSelector that accepts (state, props) as arguments":

const getPageDict = state => state.data.pageDict;
const getPropsId = (state, props) => props.pageId;

const getPage = createSelector(
    [getPageDict, getPropsId],
    (pageDict, pageId) => pageDict[props.pageId]
);

这将使您在 mapState 中的用法正确。

话虽如此，但请注意，像这样的简单对象键查找甚至不会真正受益于此处使用 Reselect 的 createSelector，因为没有真正的记忆进行。这可能很简单：

const getPage = (state, props) => state.data.pageDict[props.pageId];

查看我的 post Using Reselect Selectors for Encapsulation and Performance 以了解有关如何以及为何使用 Reselect 的更多详细信息。

重新选择库正在返回一个函数

Reselect library is returning a function

reactjs

redux

react-redux

reselect