导入被redux connect包裹的函数时报Object(...) is not a function如何解决

Redux提供的connect()是高阶组件（HOC），调用后返回的是React组件实例，而非你定义的原始普通函数onSearchFunction。你将返回的组件直接作为普通函数调用，自然会抛出Object(...) is not a function错误。

根据你的使用场景选择对应方式即可： #

场景1：你确实需要将onSearch作为React组件使用 #

你不能直接调用变量，要遵循React组件的使用规范：

• 导入时组件名首字母大写（React要求自定义组件名首字母必须大写）
• 以组件标签的形式渲染，通过props传递参数，示例：

// 导入时重命名为首字母大写
import { onSearch as OnSearch } from "c/d";

// 组件内使用
function Demo() {
  return <OnSearch param1="xxx" param2="xxx" />
}

场景2：你只是需要一个绑定了Redux状态和dispatch的公共工具函数 #

这种场景完全不需要使用connect包装，修改写法即可：

推荐写法（适配React Redux 7.1+版本） #

1. 移除onSearch.js里的connect相关逻辑，直接导出原始业务函数，把需要的Redux状态、dispatch作为入参接收：

import { fetchItems } from "a/b";

export const onSearch = (requiredState, dispatch, searchParams) => {
  // 这里写原来的业务逻辑，需要用到的state从入参取，触发action直接调用dispatch
  dispatch(fetchItems(searchParams))
  // 其他逻辑...
};

2. 在调用的组件内，通过useSelector、useDispatch两个Hook拿到需要的状态和dispatch实例，再传入函数调用：

import { useSelector, useDispatch } from "react-redux";
import { onSearch } from "c/d";

function Demo() {
  // 取出onSearch需要用到的Redux状态字段
  const requiredState = useSelector(state => ({
    userInfo: state.user.userInfo,
    // 其他需要的字段
  }))
  const dispatch = useDispatch()

  const handleSearch = () => {
    // 直接调用函数，传入对应参数
    onSearch(requiredState, dispatch, { keyword: "搜索关键词" })
  }

  return <button onClick={handleSearch}>触发搜索</button>
}

兼容Class组件的写法 #

如果调用方是Class组件，不需要使用Hook，直接从组件props中取出dispatch和需要的状态传入即可：

import React from "react";
import { connect } from "react-redux";
import { onSearch } from "c/d";

class Demo extends React.Component {
  handleSearch = () => {
    const { requiredState, dispatch } = this.props
    onSearch(requiredState, dispatch, { keyword: "搜索关键词" })
  }

  render() {
    return <button onClick={this.handleSearch}>触发搜索</button>
  }
}

const mapStateToProps = (state) => ({
  requiredState: {
    userInfo: state.user.userInfo
    // 其他需要的字段
  }
})

export default connect(mapStateToProps)(Demo)

不推荐方案：如果一定要保留原来的connect写法，可以把搜索逻辑作为组件实例方法暴露，通过ref调用，该写法属于React反模式，仅做参考：

// onSearch.js修改原函数，将搜索逻辑暴露给外部
const onSearchFunction = (props, ref) => {
  const triggerSearch = (searchParams) => {
    // 原来的业务逻辑
  }
  // 绑定ref
  React.useImperativeHandle(ref, () => ({
    triggerSearch
  }))
  return null
}
// 转发ref
const WrappedOnSearch = connect(mapStateToProps, mapDispatchToProps)(React.forwardRef(onSearchFunction))
export { WrappedOnSearch as onSearch }

调用时通过ref获取实例再调用方法：

import { onSearch as OnSearch } from "c/d";

function Demo() {
  const searchRef = React.useRef()
  return <>
    <OnSearch ref={searchRef} />
    <button onClick={() => searchRef.current.triggerSearch({keyword: 'xxx'})}>搜索</button>
  </>
}

内容的提问来源于stack exchange，提问作者some nooby questions