如何停止订阅商店更新？答案

【问题标题】：How to stop subscribing store updates?如何停止订阅商店更新？
【发布时间】：2019-06-12 22:11:04
【问题描述】：

我通过this.props.history.push 将用户从组件1 移动到组件2。当我在 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 以某种方式挂载了。感谢您的任何建议。

【问题讨论】：

一个好的做法是让您的订阅保持打开状态，直到组件卸载。您可以使用componentWillUnmount 取消订阅。您也可以订阅构造函数，但我建议您不要这样做，因为这不是构造函数的用途。

标签： javascript reactjs redux react-redux store

【解决方案1】：

商店订阅应该返回 unsubscribe 函数，您可以在 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

【讨论】：

谢谢... :-)

【解决方案2】：

如果你同时使用 React 和 Redux，你真的不应该直接在你的组件中与 store 交互。相反，您应该使用official React-Redux library，它会为您处理所有订阅和商店更新过程。有关详细信息，请参阅Why Use React Redux? 上的文档页面。

【讨论】：