React Redux mapDispatchToProps（）関数から状態にアクセスする

みなさんこんにちは！ 今日は、かなり一般的な問題の解決策を検討します。react -reduxアプリケーションのmapDispatchToProps（）関数から状態へのアクセスを取得します。

connect（）関数を使用して生成する典型的なコンテナーコンポーネント（react-reduxコンポーネントのイデオロギーについてはこちらをご覧ください ）があります。 コードを以下に示します（このトピックに関連するコードを公開しています）。

const mapStateToProps = (state) => { return state.play; }; const mapDispatchToProps = (dispatch) => { return { togglePlay: () => { dispatch(togglePlay()); } } }; const ButtonPlayComponentContainer = connect( mapStateToProps, mapDispatchToProps )(ButtonPlayComponentView);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここではすべてが簡単です。関数mapStateToProps（）を定義して状態を読み取り、 mapDispatchToProps（）でイベントを送信します。 次に、作成した関数をconnect（）に渡してコンポーネントを生成します。

さらに、より明確な画像を得るために、プレゼンテーションコンポーネントのrender（）メソッドのコードを公開します。

 render() { return( <div className="button-play" onClick={this.props.togglePlay}> <i className={ this.props.play == false ? "fa fa-play" : "fa fa-pause" }></i> </div> ); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

通常の状況では、ボタンをクリックすると状態が変化し、状態に応じて要素のクラスが変化します。

しかし、状態が変化すると、この関数またはその関数を返すタスクが表示されます。 難しいことではないようで 、 if ifで問題が解決しますが、があります。 mapDispatchToProps（）メソッドで状態にアクセスすることはできません。 その場で、1つのオプションがすぐに思い浮かびます-getState（）メソッドを使用してリポジトリにリクエストを行い、現在の状態を取得します。 しかし、このオプションはその愚かさと私を混同しました。 mapStateToProps関数ではすべての意味が失われているため、これはすでに状態の原因となっています。

connect（）メソッドのドキュメントを調べた後（今回は慎重に）、 mergePropsパラメーターを見つけました。

 connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このパラメーターのドキュメントからの抜粋：

この関数を指定して、小道具に基づいて状態のスライスを選択したり、アクション作成者を小道具から特定の変数にバインドしたりできます。

文字通り翻訳したが、この関数によって現在の状態を取得したり、アクションをpropsから変数にバインドしてイベントを送信したりできることが判明した場合（ mapDispatchToProps（）の動作）。 素晴らしい、一石二鳥。

mergePropsメソッドの実装のトピックについて少しグーグルで調べたところ、githubで質問がありました。

その結果、以下が得られます。

 const mapStateToProps = (state) => { return state.play; }; const mergeProps = (stateProps, dispatchProps) => { const { play } = stateProps; const { dispatch } = dispatchProps; const toggle = () => { dispatch(togglePlay()); if (play != true) { this.playAction(); } else { this.stopAction(); } }; return { play: play, togglePlay: () => { toggle(); } }; }; const ButtonPlayComponentContainer = connect( mapStateToProps, null, mergeProps )(ButtonPlayComponentView);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでも、すべてが単純で、 statePropsはmergePropsに到着します 。これには、現在の状態とdispatchPropsが含まれており、イベントを送信できます。 次に、コードを実行することで状態を確認し、その結果が目的の関数になり、現在の状態とイベントを持つオブジェクトを返します。これは 、 ビューコンポーネントの小道具に安全に分類されます。

欠陥を見つけたら、書き、修正してください。 ご清聴ありがとうございました。