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

Question

We are storing the data for the particular component in the redux store by using creatStore() and where combining all the component's state by using combineReducers().Now Once we came out of the page we need to clear the state stored using redux. This is not the dublicate question as written in How should I clear state in componentWillUnmount? because in this question they want to clear the state of the page that they save by using this.state{}.In our scenario we have to clean from global state (redux-stored-state) for the particular component.We want a global solution so that we can apply to all our component.Please assist me.

Answer 1

您可以在 componentWillUnmount 中分派一个 reset 操作，该操作将由相应的减速器处理。 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 状态？

How to clear the component stored redux state in componentWillUnmount?

reactjs

react-redux