Библиотека Reselect возвращает функцию

Я пытаюсь использовать библиотеку повторного выбора в первый раз, и мне кажется, что я следую примерам до T, но, очевидно, что-то мне не хватает. Когда я пытаюсь использовать его, mapStateToProps думает, что я возвращаю функцию, а не объект, который я выполняю.

Может кто-нибудь сказать мне, какой шаг мне не хватает? Я просмотрел это несколько раз и, похоже, не могу точно определить, что мне не хватает. Спасибо.

// начальное состояние редукции

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
  };
};

reactjs redux react-redux reselect
person user1189352    schedule 03.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваша getPage функция в настоящее время определена как «функция, которая принимает (state, props) и возвращает новый селектор». Это неправильный синтаксис и подход. Вместо этого вы должны определить getPage как «функцию выбора, сгенерированную createSelector, которая принимает (state, props) в качестве аргументов»:

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

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

Это сделает ваше использование в mapState правильным.

Сказав это, обратите внимание, что простой поиск ключа объекта, подобный этому, на самом деле даже не выигрывает от использования здесь createSelector Reselect, поскольку реальной мемоизации не происходит. Это может быть очень просто:

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

См. Мой пост Использование селекторов повторного выбора для инкапсуляции и производительности для получения дополнительной информации о том, как и зачем использовать Reselect.

person markerikson    schedule 03.02.2020
comment
хороший ответ с полезным объяснением и ссылкой. Tyvm - person user1189352; 04.02.2020