Moving handler functions outside the responsive component

Question

I created a reusable date picker component that I want to use throughout my React application. The problem I am facing is that the handler functions invoked during user interaction are the same in every React component where I use my date picker. This means that I need to move them to an external file.

The question is that I am moving thess functions to an external file that is not a React component, how can I access the store and dispatch functions?

Was there any kind of research and came across the idea of ​​using middleware, but as far as I know, middleware should go between the creators of actions and gearboxes. In this particular case, I simply move my handler functions to an external file without inserting anything between the action creators and the reducers.

Say my external file looks like this:

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

// Import actions
import * as myActions from '../actions/myActions';

export const handleChangeDecadeStart = (datePickerId, value) => {

   // Get current decade start
   const currentDecadeStart = this.props.decadeStart;

   // Set new decade start value
   if(value === "prev") {
         return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart - 10);  
   } else {
         return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart + 10);  
   }
}

export const setDate = (datePickerId, value) => {

   return this.props.actions.setDate(datePickerId, value);
}

function mapStateToProps(state) {

    return {
        decadeStart: state.calendars.decadeStart,
    };
}

function mapDispatchToProps(dispatch) {

    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

connect(mapStateToProps, mapDispatchToProps)(???);

I tried to change the look of things in the React component, and I'm not sure if that makes sense. I am particularly confused by the line connectbelow.

Answer 1

. - currying, , this.props . , handleChangeDecadeStart - :

const handleChangeDecadeStart = props => (datePickerId, value) => {

  // Get current decade start
  const currentDecadeStart = this.props.decadeStart;

  // Set new decade start value
  if(value === "prev") {
     return this.props.actions.setDecadeStart(datePickerId, 
    currentDecadeStart - 10);  
  } else {
     return this.props.actions.setDecadeStart(datePickerId, 
    currentDecadeStart + 10);  
  }
}

:

return (
   <YourComponent onChangeDecadeStart={handleChangeDecadeStart(this.props)}/>
)

, this.props, .

, React :

connect(mapStateToProps, mapDispatchToProps)(MyReactComponent)

, , , - . HOC - , , , . :

const wrapWithHandlers = Component => class Wrapper extends Component {
  handleChangeDecadeStart = (datePickerId, value) => {

     // Get current decade start
     const currentDecadeStart = this.props.decadeStart;

     // Set new decade start value
     if(value === "prev") {
       return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart - 10);  
     } else {
       return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart + 10);  
     }
  }

  render() {
    return <Component onChangeDecadeStart={this.handleChangeDecadeStart} {...this.props} />
  }
}

- :

export default wrapWithHandlers(MyComponent)

, , . , , , :

export default connect(mapStateToProps, mapDispatchToProps)(wrapWithHandlers(MyComponent))

, , .., , , :

import { compose } from 'redux'
...
const enhancer = compose(connect(mapStateToProps, mapDispatchToProps), wrapWithHandlers);

export default enhancer(MyComponent);

, , , HOC , recompose . withHandlers, .