Redux // React Componentはアクションディスパッチ後に2回レンダリングします

Question

私は奇妙な動作があります。 react/reduxシステムにソケット接続を追加すると、次のアクションが送出されるとすぐにメインコンポーネントが常に再レンダリングされます。

また、ナビゲーションリンク（同じルーティングアクションをディスパッチ）を再度クリックすると、同じページ上にある場合でも、同じ場所にある コンペンセントも再レンダリングされます。

私はここで軌道に乗るのを手伝ってもらえますか？ ありがとう！

セットアップ は0.15.x Reduxの 反応し、ルータのV4 反応 - ルータ - Reduxの

コンテナのapp.jsxとApp構造反応：

class Root extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <Router history={history}> 
      <Route path="/" component={RootContainer}> 
      <IndexRoute component={HomePage} /> 
      <Route path="/start" component={StartPage} /> 
      <Route path="*" component={NotFoundPage} /> 
      </Route> 
     </Router> 
     </Provider> 
    ); 
    } 
} 

RootContainerを

class RootContainer extends React.Component { 

... 

    componentWillMount() { 
    this.connectToSocket(); 
    this.joinChannel(); 
    } 

    componentWillUnmount() { 
    this.socket.disconnect(); 
    } 
... 

    connectToSocket() { 
    this.socket = new Socket('/socket'); 
    this.socket.connect(); 
    this.socket.onOpen(() => { 
     this.props.connectState(); // ACTION CALL 
    }); 
    this.socket.onError((err) => { 
     this.props.disconnectState(err); // ACTION CALL 
    } 
    } 

...

減速

Answer 1

何かが店の状態を変化させています。 RootContainerコンポーネントがconnect Reduxになっているようですので、毎回再レンダリングする可能性があります。これを最適化する主な2つの方法があります。

• 下位レベルのコンポーネントのみを必要な状態に接続します。 mapStateToPropsが異なる結果を生成した場合、Reduxのconnect上位コンポーネントのみが再レンダリングされます。これをコンポーネントツリーのより細かいレベルで行うことで、ストアの更新時に再レンダリングする必要があるコンポーネントの量が削減されます。

• Reduxに接続されておらず、親が行うたびに再レンダリングする必要がないすべての子に対して、React.PureComponentを拡張します。デフォルトでは、トップレベルコンポーネントが再レンダリングされると、すべての子も再レンダリングされます。 PureComponentこれを防ぐことができます。

これは一般的なアドバイスであり、アプリケーションの構造を詳しく見ていないと正確に何をすべきかは言い難いです。