Библиотека повторного выбора возвращает функцию - PullRequest
Новая
       57

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

0 голосов
/ 04 февраля 2020

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

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

// исходное состояние притока 

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

// селекторы. 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
  };
};

1 Ответ

1 голос
/ 04 февраля 2020

Ваша 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 здесь, так как здесь не происходит никакого реального запоминания. Это может быть просто: 

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

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

...