Как использовать карри для создания HoC в React и одновременно подключиться к магазину Redux?

Question

Я использую React и Redux с react-redux, и я создаю в React компонент высокого порядка, который я хочу подключить к хранилищу Redux, например:

const HoC = parameter => WrappedComponent => 
    return class WithSelected extends Component {

    // ..some use of 'parameter'

    render() { 

         return <WrappedComponent />

     }

  [...]

  const exportComponent = compose(
      connect(mapStateToProps),
      HoC
   )

 export default exportComponent;

и

import Component from '../Component'
import exportComponent from '../file'

const componentToExport = exportComponent('someValue')(Component);

Теперь этот подход дает такую ​​ошибку:

TypeError: Object (...) не является функцией

Кстати, если я наденуНе используйте карри для создания Hoc, он работает так:

const HoC = (parameter, WrappedComponent)  => [etc]

и

import Component from '../Component'
import exportComponent from '../file'

const componentToExport = exportComponent('someValue', Component);

Работает. Но как я могу использовать карри для создания HoC в React и одновременно использовать Redux?

Answer 1

Нет ничего плохого в карри HOC. Ниже приведен действительный компонент высшего порядка

const withHoc = param => Component => props =>{
  return <Component {...props} foo={param} />
}

Ваша проблема compose. Ваш самый правый аргумент, который предоставит сигнатуру для полученной составной функции, фактически оценивает другую HOC, а не сам компонент.

---

Вам следует connect возвращенный компонент

const HoC = parameter => WrappedComponent => connect(...)(props =>{
    /*...*/
})

Возвращение компонента на основе класса - это то же самое, что возвращение функционального компонента

const HoC = parameter => WrappedComponent => connect(...)(class X extends Component{
    render(){ return <div /> }
})

Хотя это и не так красиво