リアクションコンポーネントとRedux接続のデカップリング

Question

このように、here私は可能な限りアプリケーションのコンポーネントをデカップリングして、ストレージやアクション作成者に気付かないようにしています。

目的は、自分の状態を管理し、変更を発行する関数を呼び出させることです。私はあなたが小道具を使ってこれをすると言われました。

import { bindActionCreators, connect } from 'redux' 
import actions from 'actions' 

function mapStateToProps (state) { 
    return { 
    searchTerm: state.searchTerm 
    } 
} 

function mapDispatchToProps (dispatch) { 
    return bindActionCreators({ 
    dispatchSearchAction: actions.search 
    }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Search) 

Iと仮定すると：

// Menu.jsx 

import React from 'react' 
import { className } from './menu.scss' 
import Search from 'components/search' 

class Menu extends React.Component { 
    render() { 
    return (
     <div className={className}> 
     <a href='#/'>Home</a> 
     <a href='#/foo'>foo</a> 
     <a href='#/bar'>bar</a> 
     <Search /> 
     </div> 
    ) 
    } 
} 

そして

// Search.jsx 

import React from 'react' 
import { className } from './search.scss' 

class Search extends React.Component { 
    render() { 
    let { searchTerm, onSearch } = this.props 

    return (
     <div className={`search ${className}`}> 
     <p>{searchTerm}</p> 
     <input 
      type='search' 
      onChange={(e) => onSearch(e.target.value)} 
      value={searchTerm} 
     /> 
     </div> 
    ) 
    } 
} 

Search.propTypes = { 
    searchTerm: React.PropTypes.string, 
    onSearch: React.PropTypes.function 
} 

export default Search 

を考えると、このようになり、私はProviderとconnect、私の実装のスマートな使用を参照してくださいhereを読ん

店舗扱いを持っていますsearchTermをグローバル状態の一部として使用します。

問題は、このコードはどこに属していますか？私がSearch.jsxに入れたら、コンポーネントとアクションを結合し、より重要なのはreduxです。

私のコンポーネントの2つの異なるバージョンがあると思いますが、1つはデカップリングされ、もう1つはconnect()であり、それを使用するには<Menu />がありますか？はいの場合、私のファイルツリーはどのように見えますか？コンポーネントごとに1つのファイル、またはmake-all-connected.js？

Answer 1

コンテナと呼ばれる新しい種類のコンポーネントが存在します。これは、connect（mapStateToProps、mapActionsToProps）を使用して、現在のコンポーネントに状態とアクションを渡すコンポーネントです。

すべては、コンポーネントの使用に依存します。あなたがコンポーネント検索だけ同じ状態とアクションで使用するつもりならば、例えば、あなたの容器は同じである可能性があり、このようなあなたのコンポーネント：

// Search.jsx 
import { connect } from 'redux' 
import actions from 'actions' 
import React from 'react' 
import { className } from './search.scss' 

class Search extends React.Component { 
    render() { 
    let { searchTerm, onSearch } = this.props 

    return (
     <div className={`search ${className}`}> 
     <p>{searchTerm}</p> 
     <input 
      type='search' 
      onChange={(e) => onSearch(e.target.value)} 
      value={searchTerm} 
     /> 
     </div> 
    ) 
    } 
} 

Search.propTypes = { 
    searchTerm: React.PropTypes.string, 
    onSearch: React.PropTypes.function 
} 


function mapStateToProps ({searchTerm}) { 
    return { 
    searchTerm 
    }; 
} 

const mapDispatchToProps = { 
    onSearch: actions.search 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Search) 

しかし、あなたの計画は、他では、このコンポーネントを再利用している場合グローバル状態ではsearchTermまたはアクションが異なります。最善の方法は、このプロパティを他のコンテナに渡し、検索コンポーネントを純粋に保つことです。このように：詳細については

// Container1.jsx 
import { connect } from 'redux' 
import actions from 'actions' 
import React, { Component } from 'react' 

class Container1 extends Component { 
    render() { 
    const { searchTerm, handleOnSearch } = this.props; 
    return (
     <div> 
     <Search searchTerm={searchTerm} onSearch={handleOnSearch} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps ({interState: {searchTerm}}) { 
    return { 
    searchTerm 
    }; 
} 

const mapDispatchToProps = { 
    handleOnSearch: actions.search 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Container1) 

// Container2.jsx 
import { connect } from 'redux' 
import otherActions from 'otheractions' 
import React, { Component } from 'react' 

class Container2 extends Component { 
    render() { 
    const { searchTerm, handleOnSearch } = this.props; 
    return (
     <div> 
     <Search searchTerm={searchTerm} onSearch={handleOnSearch} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps ({otherState: {searchTerm}}) { 
    return { 
    searchTerm 
    }; 
} 

const mapDispatchToProps = { 
    handleOnSearch: otherActions.search 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Container2) 

、official docs about using redux with reactをお読みください。