title: Adding React-Redux to a helper function
body: <p>I have a helper function which is utilized by two components in my React app. And this helper function dispatches a set of Redux actions. How do I connect React-Redux to this helper function so that it can dispatch actions? </p>
  
  <p>My helper looks like this:</p>
  
  <pre><code>export default const helper = () =&gt; {
     //dispatch some actions
     // I would like to do something similar to  this: this.props.dispatch()
     //do something else(produce some JSX)
  }
  </code></pre>
  
  <p>My component look like this:</p>
  
  <pre><code> import helper from './helper.js';
  
   export default class Example extends React.Component {
     return (
        {helper()}
     );
   }
  </code></pre>
  
  <p>My component <strong>1</strong> look like this when the helper is defined inside the component itself:</p>
  
  <pre><code> import { setTime } from '../actions/setTime.js';
  
   class Example1 extends React.Component {
     helper() {
       //actions are synchronous
       this.props.setTime('10:00PM');
  
       return (&lt;h1&gt;hello&lt;/h1&gt;);
     }
  
     render() {
       return (
        &lt;h1&gt;something&lt;/h1&gt;
        {helper()}
       );
     }
   }
  
   const mapDispatchToProps = (dispatch) =&gt; {
     return {
        setTime: (time) =&gt; (dispatch(setTime(time)))
     };
   }
  
   export default connect(null, mapDispatchToProps)(Example1);
  </code></pre>
  
  <p>My component <strong>2</strong> look like this when the helper is defined inside the component itself:</p>
  
  <pre><code> import { setTime } from '../actions/setTime.js';
  
   class Example2 extends React.Component {
     helper() {
       //actions are synchronous
       this.props.setTime('10:00PM');
  
       return (&lt;h1&gt;hello&lt;/h1&gt;);
     }
  
     render() {
       return (
        {helper()}
       );
     }
   }
  
   const mapDispatchToProps = (dispatch) =&gt; {
     return {
        setTime: (time) =&gt; (dispatch(setTime(time)))
     };
   }
  
   export default connect(null, mapDispatchToProps)(Example2);
  </code></pre>
  
  <p><strong>Example1 and Example2 renders based on Route change. You might be thinking I can use the higher order component but I cannot because these two components have different state and renders different things.</strong></p>
  
  <p>Please note that I want to have access to the dispatch function in the helper method and I am not accessing Redux state from that component so I do not have to worry about state change(mapStateToProps is not in use). </p>