Как пометить (глубокое сравнение) объекты Redux, используя реселект с createSelectorCreator ()? - PullRequest
0 голосов
/ 17 октября 2019

Ситуация

Используя реактивный редукс, в mapStateToProps для одного из компонентов моего контейнера, для удобства я передаю объект с ключами 8+. (Я знаю, что передача предметов вниз - это анти-паттерн, но удобство прохождения единичного объекта, а не множества отдельных реквизитов, в моем случае существенно.)

Вопрос

Можете ли вы использовать reselect, чтобы запомнить весь объект для прохождения через mapStateToProps, только передавая его путем глубокого сравнения всего этого объекта? Если да, то как правильно это сделать?

Моя попытка

Я прочитал раздел документов reselect, "Настройка EquityCheck для defaultMemoize" и прочиталколичество постов, в которых предпринята попытка запоминания массивов с использованием reselect. Основываясь на этих знаниях, я попытался сделать следующее, но безуспешно:

import _ from 'lodash';
import { createSelector, createSelectorCreator, defaultMemoize } from 'reselect'

const createDeepEqualSelector = createSelectorCreator(
  defaultMemoize,
  _.isEqual,
);

const getLargeObject = createDeepEqualSelector(
  (state) => {
    // Get the individual values from state
    const {
      val1, val2, val3, val4, val5, val6, val7, val8, val9, val10
    } = state;

    // Create a convenient object that contains all of those values to pass down to props
    const constructedObject = {
      val1, val2, val3, val4, val5, val6, val7, val8, val9, val10
    };

    return constructedObject;
  },
  constructedObject => constructedObject,
);

const mapStateToProps = (state, ownProps) => {
  const objProp = getLargeObject(state);

  return {
    objProp,
    // ... other props
  };
}

(Несчастная) альтернатива

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

const getVal1 = (state) => state.val1;
const getVal2 = (state) => state.val2;
...

const getLargeObject = createSelector(
  [
    getVal1,
    getVal2,
    ...
  ],
  (
    val1,
    val2,
    ...
  ) => {
    const largeObject = {
      val1,
      val2,
      ...
    };

    return largeObject;
  },
);

Спасибо за любую помощь, которую вы можете оказать!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...