如何在 React 中使用 currying 创建 HoC 同时连接到 Redux store？

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(...) is not a function

顺便说一句，如果我不使用 currying 创建 Hoc，它会像这样工作：

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

和

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

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

有效。但是如何在 React 中使用 currying 创建 HoC 的同时使用 Redux？

Answer 1

柯里化 HOC 没有错。下面是有效的高阶分量

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

您的问题是compose。您最右边的参数将为生成的组合函数提供签名，实际上正在评估另一个 HOC 而不是组件本身。

你应该connect返回的组件

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

返回基于 class 的组件与返回功能组件相同

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

只是没那么漂亮

如何在 React 中使用 currying 创建 HoC 同时连接到 Redux store？

How to use currying to create HoC in React and connect to the Redux store at the same time?

reactjs

react-redux

currying