react + redux + normalizer：如何发送条件非规范化数据？

Question

例如简单的country-region选择任务（两个组合框） 我从第一个组合框中选择 'country' 并将其 ID 保持在组件状态。接下来，我必须为选定的 country ID 加载 'regions' - 在某些调度方法中执行此操作。它的一切工作完美。好的，redux 存储包含所有必需的数据...我只需要将加载的 regions 发送到组件... 但！ 在 mapStateToProps 我没有组件状态（选择 'country' ID），所以我需要传递所有 'regions' （适用于所有国家) 到组件道具...好吧...

我正在使用 normalizr 并且 Redux 存储中的所有数据都已标准化。并且非规范化需要所有实体（因为引用），所以我必须将所有 redux 存储传递给组件道具......似乎不太好：非规范化不是组件职责，mapStateToProps 是最合适的地方，但是非规范化所有 regions（mapStateToProps 中没有国家 ID）可能会消耗太多时间...

此类任务的最佳实践是什么？

Answer 1

好吧，不确定是否有解决方案，但使用 HOC（自定义 withDynamicProps 方法）似乎可以工作：

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 库提供了一种无需编写任何 reducer 逻辑即可管理规范化状态的方法，并包含一个 normalizr adapter，可以将您的 normalizr 输出转换为与 reducer 兼容的初始状态。