Brtdku

I move user from component1 to component2 by this.props.history.push. When I am in component2 it looks like component1 is still mounted.

I tried everything as in similar problems with unsubscribe store.

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;

After componentWillUnmount I would to stop subscribing store events in component, because now when my store updates I see log unmount in my console, so Component1 is somehow mounted.
Thanks for any suggestions.

Store subscribe should return the unsubscribe function which you can call at componentWillUnmount to successfully unsubscribe from the store.

you can define and store it in state directly in componentWillMount:

this.setState({

  unsubscribe: store.subscribe(() => {

       translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{

            this.setState({texts: res.data});

        });

  });

});

and then call unsubscribe on componentWillUnmount

componentWillUnmount() {

  this.state.unsubscribe()

}

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

If you're using React and Redux together, you really shouldn't be interacting with the store directly in your component. Instead, you should be using the official React-Redux library, which handles all the subscription and store update process for you. See the docs page on Why Use React Redux? for more details.