How to connect recompose with react-redux?

Question

React

Good evening everyone. I'm learning react. 2 code examples.
1) Here the functions are moved to compose so as not to use arrow functions or .bind(this) in the component

import React from 'react';
import {compose, withState, withHandlers}from 'recompose';
import PropTypes from 'prop-types';

const DropDown = ({isOpened, onClick, onMouseOver, onMouseOut}) => {
  let dropDownText;
  if (isOpened){
    dropDownText = <div>Here is what is shown is dropdown</div>;
  }
  return (
    <div
      onClick={onClick}
      onMouseOut={onMouseOut}
      onMouseOver={onMouseOver}
    >
      its drop down bebe
      {dropDownText}
    </div>
  );
};

DropDown.propTypes = {
  isOpened: PropTypes.bool,
  onClick: PropTypes.func,
  onMouseOut: PropTypes.func,
  onMouseOver: PropTypes.func,
};

export default compose(
  withState('isOpened', 'toggleVisible', false),
  withHandlers({
    onClick: ({toggleVisible}) => () => {
      toggleVisible(isOpened => {
        if (isOpened) {
          isOpened = false;
        }else {
          isOpened = true;
        }
        return isOpened;
      });
    },
    onMouseOver: ({toggleVisible}) => () => {
      toggleVisible(isOpened => {
        isOpened = true;
        return isOpened;
      });
    },
    onMouseOut: ({toggleVisible}) => () => {
      toggleVisible(isOpened => {
        isOpened = false;
        return isOpened;
      });
    },
  })
)(DropDown);

2) Here I study what react-redux is.

import React, {Component}from 'react';
import PropTypes from 'prop-types';
import {connect}from 'react-redux';

class App extends Component {

  static PropTypes = {
    testStore: PropTypes.array.isRequired,
    onAddTrack: PropTypes.func,
  };

  addTrack() {
    const props = this.props;
    console.log('addTrack', this.trackInput.value);
    props.onAddTrack(this.trackInput.value);
    this.trackInput.value = '';
  }

  render() {
    const props = this.props;
    console.log('this.props', props.testStore);
    return (
      <div className='container'>
        <input ref={input => {this.trackInput = input;}} type='text' />
        <button onClick={this.addTrack.bind(this)}>Add Track</button>
        <ul>
          {
            props.testStore.map((track, index) =>
              <li key={index}>{track}</li>
            )
          }
        </ul>
      </div>
    );
  }

}

export default connect(
  state => ({
    testStore: state,
  }),
  dispatch => ({
    onAddTrack: trackName => {
      dispatch({type: 'ADD_TRACK', payload: trackName});
    },
  }),
)(App);

The question is, how to put the functions in compose in the second code example?

Answer 1

To solve this problem, you need to create a containers folder, put connect() in containers>index.js, put the addTrack() function in HOC called withHandlers and also arrange it in a separate file. Should be something like

import { withHandlers } from "recompose";

export default withHandlers({
  addTrack: props => values => {
  // тут логика
  },
});

then you create an app.js file with something like this

import component from "./components"; //твой .jsx
import connection from "./containers"; //твой connect
import withHandlers from "./containers/withHandlers"; //твои функции
import { compose } from 'recompose'; 

export default compose(
  connection,
  withHandlers
)(component);

And the class needs to be rewritten to a function of this kind
export default props => jsx