реаги + редукс + нормализатор: как отправить условные денормализованные данные?

Question

Например, простая страна-регион задача выбора (два поля со списком) Я выбираю ' страна ' из первого списка и сохраняю его идентификатор в состоянии компонента. Затем я должен загрузить ' регионов ' для выбранной страны ID - это делается в некотором методе отправки. Все работает отлично. Хорошо, хранилище резервов содержит все необходимые данные ... Все, что мне нужно, это отправить загруженные регионов в компонент ... НО! в mapStateToProps У меня нет состояния компонентов (выбранный страна 'ID), поэтому мне нужно передать все' регионов '(для всех стран) компоненту props ... okey ...

Я использую normalizr и все данные в хранилище Redux нормализованы. А для денормализации требуются все сущности (из-за ссылок), поэтому я должен передать все хранилище избыточностей компонентам-реквизитам ... это, кажется, не странно: денормализация не является обязанностью компонентов, mapStateToProps является наиболее подходящим местом для этого, но денормализация всех регионов (без идентификатора страны в mapStateToProps ) может занимать слишком много времени ...

Каковы лучшие практики для такой задачи?

Answer 1

Ну, не уверен, если оценивает решение, но с HO C (пользовательский метод с DynamicProps), похоже, работает:

import React from "react";

function withDynamicProps(Component, initalProps = {}) {
  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = initalProps;
      this.setDynamicProps = this.setDynamicProps.bind(this);
    }

    setDynamicProps(dynamicProp) {
      this.setState(dynamicProp);
    }

    render() {
      return (
        <Component
          {...this.props}
          {...this.state}
          setDynamicProps={this.setDynamicProps}
        />
      );
    }
  };
}

export { withDynamicProps };

и в моем контейнере -компонент:

class ContainerComponent extends Component {
  ....

  componentDidMount() {
    const { countryId } = this.props;

    loadCountries();

    if (countryId) {
      loadRegions(countryId);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { prevState} = this.props;

    if (countryId && prevState.countryId !== countryId) {
      loadRegions(countryId);
    }
  }

  onCountryChangeHandler(countryId) {
    this.props.setDynamicProps({ countryId });
  }

  render() {
    const { countriesList, regionsList, countryId } = this.props;

    return (
      <PresentationComponent {...this.props}/>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const {
    countryId
  } = ownProps;

  const {
    entities: { countries, regions },
    associativitiesRefs: { regionsByCountry }
  } = state;

  const countriesList = Object.keys(countries).map(x =>
    denormalize(countries[x], Schemas.COUNTRY, state.entities)
  );

  const regionsIdByCountry = regionsByCountry[countryId] || {
    ids: []
  };

  const regionsList = regionsIdByCountry.ids.map(x =>
    denormalize(regions[x], Schemas.REGION, state.entities)
  );

  return {
    countriesList,
    regionsList
  };
};

export default withDynamicProps(
  withRouter(
    connect(
      mapStateToProps,
      {
        loadCountries,
        loadRegions
      }
    )(ContainerComponent)
  )
);

Answer 2

Библиотека normalized-reducer обеспечивает способ управления нормализованным состоянием без записи каких-либо логи редуктора c и включает адаптер нормализатора , который может преобразовать ваш вывод нормализатора в совместимый с редуктором начальное состояние.