Как соединить recompose с react-redux?

Question

[Юра Комаров]

Всем доброго вечера. Изучаю react. 2 примера кода.
1) Здесь функции вынес в compose что бы не использовать в компоненте стрелочные функции или .bind(this)

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) Здесь изучаю что такое react-redux.

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

Вопрос, как во втором примере кода вынести функции в compose?

Comments

[Антон Спирин]

Вы используете инструмент, но при этом сами не понимаете нужен он вам или нет. Я про recompose.
Вы только усложнили компонент и сделали его менее читаемым.

что бы не использовать в компоненте стрелочные функции или .bind(this)

Чего плохого вы видите в стрелочных функциях и bind?

[Юра Комаров]

Но раз написали 'recompose' and eslinter ругается на (стрелочные и bind) функции, значит что то не так с этими функциями.
Есть примеры как связать 'recompose' и 'react-redux' но что то не могу понять как.

[Игорь Забродин]

recompose для изначального изучения react'а и redux'а не нужен. Вернетесь к нему когда поймете для чего он и когда он понадобится.

import { connect } from 'react-redux';
import { withRouter } from 'react-router';

export default withRouter(
  connect(
    state => ({
      componentState: state.globalComponentState
    }),
    dispatch => ({
      someComponentMethod: payload => dispatch(componentActions.someActions(payload))
    })
  )(Component)
);

При этом также используется eslint с плагинами с рекомендуемыми настройками:

"extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:node/recommended",
    "plugin:import/react",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": ["babel", "react", "node", "import", "promise", "jsx-a11y", "prettier"]

Answer 1

[Егор Жолнин]

Для решения этой проблемы нужно создать папочку containers, connect() вынести в containers>index.js, функцию addTrack() вынести в HOC под названием withHandlers и так же оформить отдельным файлом. Должно получиться что-то типа

import { withHandlers } from "recompose";

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

дальше создаешь файл app.js примерно такого содержания

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

И класс нужно переписать на функцию такого вида

export default props => jsx