Question

我们将特定组件的数据存储在redux中通过使用creatStore（）存储并组合所有组件通过使用combineReducers（）来表示状态。现在，一旦我们走出页面，我们就会需要清除使用redux存储的状态。这不是刻板的写的问题 How should I clear state in componentWillUnmount? 因为在这个问题中他们想要清除那个页面的状态他们通过使用this.state {}来保存。在我们的场景中，我们必须从中清除特定组件的全局状态（redux-stored-state）。我们想要全球解决方案，以便我们可以应用于我们所有的组件。请帮帮我。

Answer 1

您可以在reset中发送componentWillUnmount操作，该操作将由相应的reducer处理。减速器将清除redux状态。

要使其成为全局，您可以创建一个更高阶的组件，该组件会将重置操作的调度添加到它应用的组件中。并且您可以为整个应用程序配备一个reducer来处理重置操作。

Answer 2

您需要导入组件全局存储的操作：

    import {
  fetchCountries,
  fetchResellers,
  selectCountry
} from "../points-of-sale/actions";

我使用@Container装饰器

@Container({
  props: state => ({
    error: state.product.error,
    product: state.product.product,
    fetched: state.product.fetched,
    locale: state.i18n.locale,
    countries: state.pointsOfSale.countries,
    resellers: state.pointsOfSale.resellers,
    availableCountries: state.pointsOfSale.availableCountries,
    selectedCountry: state.pointsOfSale.selectedCountry,
    selectedResellerType: state.pointsOfSale.selectedResellerType,
    selectedResellers: state.pointsOfSale.selectedResellers,
    menuFixed: state.layout.menuFixed
  }),

  actions: {
    ...actions,

    fetchCountries,
    fetchResellers,
    selectCountry
  }
})

此处导入动作或其他组件的存储... 然后只有您需要使用de action来调用适当的reducer

 async componentDidMount() {
    if (
      !this.props.product ||
      this.props.product.slug != this.props.params.product
    ) {
      await this.props.fetchProduct(this.props.params.product);
    }
    if (!this.props.countries.fetched) {
      await this.props.fetchCountries();
    }

    if (!this.props.resellers.fetched) {
      await this.props.fetchResellers();
    }

    this.props.getMenuFixed();



  }

如果要卸载组件时要清理，则可以调用全局操作来更改任何组件的状态

  async componentWillUnmount() {
    console.log("componente se esta desmontando");
    await this.props.setErrorDefaultValue();
  }

如何在componentWillUnmount中清除组件中存储的redux状态？

2 个答案: