如何停止订阅商店更新？

Question

我通过 this.props.history.push 将用户从 component1 移动到 component2。当我在 component2 时，它看起来像 component1 仍然挂载。

我尝试了所有与退订商店类似的问题。

import React, {Component} from 'react';
import axios from 'axios';
import {Animate} from 'react-animate-mount';
import {translateTexts} from "../App";
import store from "../../store";


class Component1 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            texts: {
                computing: null
           },
        };
    }

    componentWillUnmount() {
        return store.subscribe(() => {
            console.log('unmount');
        })
    }

    componentWillMount() {
        store.subscribe(() => {
           translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{
                this.setState({texts: res.data});
            });
        });


        axios.post(`/api/`)
            .then((res) => {
                this.setState({show: false});
                    setTimeout(() => {
                        window.location.href = '/storage/'+res.data.id
                    }, 600);        
             })
            .catch((err) => {
                this.props.history.push({
                    pathname: '/error/'+err.response.status,
                    state: { code: err.response.status }});
               });
            });


    render() {
         return (
             <div className="box">
                   Something
             </div>
        );
    }
}

export default Component1;

import React, { Component } from 'react';
import store from "../../store";
import {translateTexts} from "../App";

class Component2 extends Component {

     constructor(props) {
        super(props);
        this.state = {
        code : null,
        texts: {
            msg: null
           }
       };
    }

    componentWillMount() {
        this.setState( {
            code: this.props.location.state.code,
        });

        store.subscribe(() => {
           translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{
                this.setState({texts: res.data});
            });
        });
    }

     render() {
        return (
            <div>
                Code: {this.state.code}
                <br></br>
                Message: <strong>{this.state.texts.msg}</strong>
             </div>
         );
    }
}

export default Component2;

在 componentWillUnmount 之后，我将停止订阅组件中的 store 事件，因为现在当我的 store 更新时，我在控制台中看到日志 unmount，所以 Component1 以某种方式安装。感谢您的任何建议。

Answer 1

商店订阅应该 return 取消订阅 函数，您可以在 componentWillUnmount 调用该函数以成功取消订阅商店。

可以直接在componentWillMount:

中定义存储在state

this.setState({
  unsubscribe: store.subscribe(() => {
       translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{
            this.setState({texts: res.data});
        });
  });
});

然后在 componentWillUnmount

上调用 unsubscribe

componentWillUnmount() {
  this.state.unsubscribe()
}

Redux 文档：https://redux.js.org/api/store#subscribe

Answer 2

如果你同时使用 React 和 Redux，你真的不应该直接在你的组件中与商店交互。相反，您应该使用 official React-Redux library, which handles all the subscription and store update process for you. See the docs page on Why Use React Redux? 获取更多详细信息。

如何停止订阅商店更新？

How to stop subscribing store updates?

javascript

store

reactjs

redux

react-redux