redux/react-router v4でコンポーネントを更新する必要があります

Question

"ルート"のプロパティを "ホーム"の反応ルートに渡しています。

私のアプリケーションの「状態」（state.loggedIn）が変更されると、「ホーム」が更新されます（外観は期待どおりに変更されます）が、「shouldComponentUpdate」は呼び出されません。

"shouldComponentUpdate"を使用して、ルート（Root）でプロパティ（ "loggedIn"）が変更されたかどうかを検出し、余分な作業をします。

// Root.js 
import {Provider} from 'react-redux'; 
import { 
    BrowserRouter as Router, 
    Redirect, 
    Route, 
    Switch} from 'react-router-dom'; 

... 

render() { 
    const store = this.props.store; 
    const loggedIn = this.state.loggedIn; 
    const handleLogin = this.handleLogin; 
    const handleLogout = this.handleLogout; 

    return (
    <Provider store={store}> 
     <Router history={browserHistory}> 
     <Switch> 
      <Route exact path="/" component={ 
      (props) => (
       <Home 
       history={props.history} 
       loggedIn={loggedIn} 
       handleLogout={handleLogout}/>)} /> 
      <Route path="/login" component={ 
      (props) => (
       <Login 
       history={props.history} 
       handleLogin={handleLogin}/>)} /> 
     <Route path="/workflow" component={ 
      loggedIn ? 
      ((props) => (
       <Workflows 
       history={props.history} 
       match={props.match}/>)) : 
      ((props) => (
       <Redirect to={ 
       { 
        pathname: '/', 
        state: {from: props.location}, 
       } 
       }/>)) }/> 
     </Switch> 
     </Router> 
    </Provider> 
); 

}

// Home.js 
shouldComponentUpdate(nextProps, nextState) { 
    console.log(nextProps); 
    console.log(nextState); 
    if(nextProps.loggedIn !== nextState.loggedIn) { 
    if(nextState.loggedIn) { 
     this.socket.connect(); 
    } else { 
     this.socket.disconnect(); 
    } 
    } 

    return true; 
} 

Answer 1

あなたのコンポーネントがすべての状態の変更後に再マウントされているように見えます。これは、コンポーネントが再描画される理由を説明しますが、ライフサイクル関数shouldComponentUpdate()は呼び出されません。 componentWillMount()にログステートメントを貼り付けると、複数回呼び出されているはずです。