Как прекратить подписку на обновления магазина? - PullRequest
Новая
       18

Как прекратить подписку на обновления магазина?

0 голосов
/ 18 января 2019

Я перемещаю пользователя из компонента 1 в компонент 2 на this.props.history.push. Когда я нахожусь в компоненте 2, кажется, что компонент 1 все еще подключен.

Я перепробовал все как в похожих проблемах с магазином отписки. 

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 каким-то образом смонтирован. Спасибо за любые предложения.

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Если вы используете React и Redux вместе, вам действительно не следует взаимодействовать с хранилищем непосредственно в вашем компоненте. Вместо этого вам следует использовать официальную библиотеку React-Redux , которая обрабатывает все процессы подписки и обновления магазина для вас. См. Страницу документации на Зачем использовать React Redux? для получения более подробной информации.

0 голосов
/ 18 января 2019

При подписке на магазин должна возвращаться функция unsubscribe , которую можно вызвать по componentWillUnmount , чтобы успешно отписаться от магазина.

Вы можете определить и сохранить его в состоянии непосредственно в componentWillMount : 

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

, а затем вызовите unsubscribe на componentWillUnmount 

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

Redux Docs : https://redux.js.org/api/store#subscribe

...