title: use react-redux with connect() and {...this.props}
body: <p>I cannot figure out, how to make right solution, when I want to call action in my container from other component, by the way I want to use spread operator because I need to pass too many parametrs in my component and don't want describe all of them.</p>
  
  <p>I know I can pass all props from redux store via props, like this example in Menu, but my component too nested, and I have to send props in eighter component in nest</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>render() {
  
          return (
              &lt;div className="wrapper"&gt;
                  &lt;Menu {...this.props} /&gt;
              &lt;/div&gt;
          );
  
      }
  
  }
  
  const mapStateToProps = reduxStore =&gt; (
      {
          app: reduxStore.app
      }),
  
      mapDispatchToProps = dispatch =&gt; ({appActions: bindActionCreators(appActions, dispatch)});
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, I decided to connect my nested component with redux store, because I need to work from my nested component with store and actions in main container component. But this solution doesn't work, because i use spread operator to my nested component.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>render() {
  
          return &lt;Link activeClassName='active' onClick={this.props.appActions.closeMenu} {...this.props} /&gt;;
  
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And using spread operator is really important because component get too much different parameters from its parent component, and if i don't use {...this.props}, I have to write like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>render() {
  
          const { to, onlyActiveOnIndex, className, specialIcons } = this.props;
  
          return &lt;Link activeClassName='active' onClick={this.props.appActions.closeMenu} to={to} specialIcons={specialIcons} onlyActiveOnIndex={onlyActiveOnIndex} className={className} &gt;{this.props.children}&lt;/Link&gt;;
  
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But also, I have to connect to common redux store, and when I connected, occurs an Error, because of my component use {...this.props} and it get all props, including actions from container and component doesn't know what do with them. I find one solution of this proplem, but I'm not sure that it is right variant. I clone props with spread operators, but delete property that contain new functions (actions) from common store.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>render() {
  
          let oldProps = {...this.props};
          delete oldProps.appActions;
          delete oldProps.app;
  
          return &lt;Link activeClassName='active' onClick={this.props.appActions.closeMenu} {...oldProps} &gt;{this.props.children}&lt;/Link&gt;;
  
      }
  
  }
  
  const mapState = reduxStore =&gt; ({app: reduxStore.app}),
      mapDispatchToProps = dispatch =&gt; ({appActions: bindActionCreators(appActions, dispatch)});
  
  export default connect(mapState, mapDispatchToProps)(NavLink);</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm guessing that I don't understand something basic and global in react-redux or I use bad practice. May be I should use higher order components in React? but now I don't know how to make it better.</p>