Adding React-Redux to a helper function

Question

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?

My helper looks like this:

export default const helper = () => {
   //dispatch some actions
   // I would like to do something similar to  this: this.props.dispatch()
   //do something else(produce some JSX)
}

My component look like this:

 import helper from './helper.js';

 export default class Example extends React.Component {
   return (
      {helper()}
   );
 }

My component 1 look like this when the helper is defined inside the component itself:

 import { setTime } from '../actions/setTime.js';

 class Example1 extends React.Component {
   helper() {
     //actions are synchronous
     this.props.setTime('10:00PM');

     return (<h1>hello</h1>);
   }

   render() {
     return (
      <h1>something</h1>
      {helper()}
     );
   }
 }

 const mapDispatchToProps = (dispatch) => {
   return {
      setTime: (time) => (dispatch(setTime(time)))
   };
 }

 export default connect(null, mapDispatchToProps)(Example1);

My component 2 look like this when the helper is defined inside the component itself:

 import { setTime } from '../actions/setTime.js';

 class Example2 extends React.Component {
   helper() {
     //actions are synchronous
     this.props.setTime('10:00PM');

     return (<h1>hello</h1>);
   }

   render() {
     return (
      {helper()}
     );
   }
 }

 const mapDispatchToProps = (dispatch) => {
   return {
      setTime: (time) => (dispatch(setTime(time)))
   };
 }

 export default connect(null, mapDispatchToProps)(Example2);

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.

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).

Without your code, it is hard to say. Is your helper function a dispatcher that you can map to your props? Is it how you should use connect( mapStateToProps, mapDispatchToProps )( Component ) you are asking? — Icepickle
– Icepickle, Commented Dec 6, 2018 at 19:37
So you are looking for some way to add dispatch to your helper method? You really don't want to dispatch some actions from your rendering method, as it could change the state of your component and create some kind of continuous / endless render -> dispatch -> state update -> render -> dispatch ... If you wish to create jsx based on a certain state, maybe your helper should do only that, and you can pass the current state in? — Icepickle
– Icepickle, Commented Dec 6, 2018 at 19:44
@Icepickle Please note I am not accessing Redux state from that component so I do not have to worry about state change(mapStateToProps is not in use). And yes, I want to have access to the dispatch function in the helper method. — loveTrumpsHate
– loveTrumpsHate, Commented Dec 6, 2018 at 19:47
Can you give more input code about what your helper function is doing? I would pass helper as 2 second argument of connect, I think that would be the most easy way to do it, your helper function would then get dispatch as a first argument (but then you could dispatch from inside your component instead) — Icepickle
– Icepickle, Commented Dec 6, 2018 at 19:51

Estus Flask · Accepted Answer · 2018-12-06 20:53:18Z

2

This is XY problem.

react-redux and connect are supposed to be used with components, it relies on component hierarchy (React context) to provide a store to components. connect isn't supposed to be used with functions that don't belong to component hierarchy.

It's possible to access store.dispatch directly in helper function but this indicates design problem because it's low level API that isn't supposed to be used directly in React

Component composition is idiomatic way to compose functionality in React. helper function performs a side effect (dispatches an action) and returns an element. It can be expressed as connected component:

const Helper = props => {
 props.setTime('10:00PM');

 return (<h1>hello</h1>);
};


 const mapDispatchToProps = (dispatch) => {
   return {
      setTime: (time) => (dispatch(setTime(time)))
   };
 }

export default connect(null, mapDispatchToProps)(Helper);

answered Dec 6, 2018 at 20:53

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

loveTrumpsHate Over a year ago

Can Helper return an array rather than a JSX element?

Estus Flask Over a year ago

Do you mean an array of elements? Yes. As any React 16 component.

loveTrumpsHate Over a year ago

How do you distinguish a functional component from a function?

loveTrumpsHate Over a year ago

Possibly, looking at the case sensitive function name or React import statement? @estus

Estus Flask Over a year ago

If a function was designed to work as functional component (accepts props object as only param, etc) then it's a component. Yes, you can distinguish it by upper case.

marc_s · Accepted Answer · 2019-07-14 20:58:31Z

1

I had a similar problem, i resolve it by passing this to helper function. If u need to dispatch it by action something like example could help.

export default const helper = (that) => {
   return <button onClick={()=>that.props.YourDispatch()}/>
}

import helper from './helper.js';

export default class Example extends React.Component {
   return (
      {helper(this)}
   );
}

edited Jul 14, 2019 at 20:58

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 30, 2019 at 9:28

noon

111 bronze badge

Collectives™ on Stack Overflow

Adding React-Redux to a helper function

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related