connect（）と{... this.props}を使ってreact-reduxを使用する

Question

正しい解決策を立てる方法がわかりません。コンテナ内のアクションを別のコンポーネントから呼び出す場合は、私はコンポーネントにあまりにも多くのパラメータを渡す必要があり、それらのすべてを記述したくないので、スプレッド演算子を使用してください。

は私がメニューでこの例のように、小道具を経由してReduxのストアからすべての小道具を渡すことができます知っているが、私のコンポーネントは、あまりにも入れ子になった、と私は巣

render() { 
 

 
     return (
 
      <div className="wrapper"> 
 
       <Menu {...this.props} /> 
 
      </div> 
 
     ); 
 

 
    } 
 

 
} 
 

 
const mapStateToProps = reduxStore => (
 
    { 
 
     app: reduxStore.app 
 
    }), 
 

 
    mapDispatchToProps = dispatch => ({appActions: bindActionCreators(appActions, dispatch)}); 
 

 
export default connect(mapStateToProps, mapDispatchToProps)(App);

にeighterコンポーネントで小道具を送信する必要があります

私は入れ子になったコンポーネントをreduxストアに接続することに決めました。なぜなら、メインコンテナコンポーネント内のストアとアクションを持つ入れ子コンポーネントから作業する必要があるからです。しかし、私のネストされたコンポーネントにスプレッド演算子を使用するので、この解決策は動作しません。私が持っている

render() { 
 

 
     return <Link activeClassName='active' onClick={this.props.appActions.closeMenu} {...this.props} />; 
 

 
    }

と拡散演算子を使用して、コンポーネントがその親コン​​ポーネントからあまりにも多くの異なるパラメータを取得するために非常に重要である、と私は使用していない場合は、{... this.props}、私が持っている

render() { 
 

 
     const { to, onlyActiveOnIndex, className, specialIcons } = this.props; 
 

 
     return <Link activeClassName='active' onClick={this.props.appActions.closeMenu} to={to} specialIcons={specialIcons} onlyActiveOnIndex={onlyActiveOnIndex} className={className} >{this.props.children}</Link>; 
 

 
    }

しかし、また、このように書くこと私のコンポーネントの使用{... this.props}のために、エラーが発生し、コンテナやコンポーネントからのアクションを含むすべての小道具が得られます。私はこのプロンプトの1つの解決策を見つけましたが、私はそれが正しい変種であるとは確信していません。私は普及した演算子で小道具を複製するが、共通の記憶から新しい機能（アクション）を含むプロパティを削除する。

render() { 
 

 
     let oldProps = {...this.props}; 
 
     delete oldProps.appActions; 
 
     delete oldProps.app; 
 

 
     return <Link activeClassName='active' onClick={this.props.appActions.closeMenu} {...oldProps} >{this.props.children}</Link>; 
 

 
    } 
 

 
} 
 

 
const mapState = reduxStore => ({app: reduxStore.app}), 
 
    mapDispatchToProps = dispatch => ({appActions: bindActionCreators(appActions, dispatch)}); 
 

 
export default connect(mapState, mapDispatchToProps)(NavLink);

私が反応し-Reduxの中の基本と世界的な何かを理解していないことを推測しているか、私は悪い習慣を使用しています。 Reactで上位コンポーネントを使うべきでしょうか？しかし今、私はそれをより良くする方法を知らない。

Answer 1

ここは機能的な例です。私は個人的なプロジェクトのために作った。私は例の目的のために無用なコードを削除します。 あなたが得たいと思われるものは、eslintです。人々がコーディング中に作り出している基本的な間違いを表示します。

たとえば、PropTypeを宣言したと言います。あなたのコードでは、それは何のアプリは何ですか？もちろんそれはreduxStore.appから来ていますが、それはどのようなPropTypesですか？

また、すべてのreduxStore状態をコンポーネントにリンクしないでください。本当に必要なものをインポートするだけです。私の例では、state.app.usersからusersだけをインポートします。私はより多くを持っていた、または減速状態のすべての要素をしたい場合、私はindividuallそれらのすべてをインポートして、このような小道具を宣言します：

Home.propTypes = { 
     users: PropTypes.object.isRequired, 
     actions: { 
      load: PropTypes.func.isRequired, 
     }, 
    }; 

JavaScriptは型付けされた言語、上記のようなPropTypesではないので型付き検証を手助けします。あなたのケースではAppActionsにインポートするすべての機能を含む小道actionsを見ることもできます。これはyaを助ける私のcomponentWillMount()

import React, { Component, PropTypes } from 'react'; 
    import { ListView} from 'react-native'; 
    import { connect } from 'react-redux'; 
    import { bindActionCreators } from 'redux'; 

    import * as app from '../../actions/appActions'; 

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 

    class Home extends Component { 

     constructor(props) { 
      super(props); 
      this.state = { 
       dataSource: ds.cloneWithRows(props.users.toJS()), 
      }; 
     } 

     componentWillMount() { 
      this.props.actions.load(); 
     } 

     componentWillReceiveProps(nextProps) { 
      if (this.props.users !== nextProps.users) { 
       this.setState({ 
        dataSource: ds.cloneWithRows(nextProps.users), 
       }); 
      } 
     } 

     render() { 
      return (
        <ListView 
         dataSource={this.state.dataSource} 
         enableEmptySections 
         renderRow={ 
          (rowData) => <User haveLunch={rowData.haveLunch} name={rowData.name} /> 
         } 
        /> 
      ); 
     } 
    } 

    Home.propTypes = { 
     users: PropTypes.object.isRequired, 
     actions: { 
      load: PropTypes.func.isRequired, 
     }, 
    }; 

    function mapStateToProps(state) { 
     return { 
      users: state.app.users, 
     }; 
    } 

    function mapDispatchToProps(dispatch) { 
     return { 
      actions: bindActionCreators(app, dispatch), 
     }; 
    } 

export default connect(mapStateToProps, mapDispatchToProps)(Home); 

希望を見て、その後のアクションからの機能を使用する方法を参照するには

;）