React-redux connect() cannot wrap component defined as a class extending React.Component

问题

I may be missing something, but I can't find any example where connect() wraps a component defined as a class (extending React.Component), it always wraps components defined as a simple function.

A call like this:

connect(mapStateToProps, mapDispatchToProps)(HomeView)

where HomeView extends React.Component, I get a Cannot call a class as a function error.

Any help would be much appreciated.

Edit (sorry for the ammount of code, I don't know what might be relevant):

routes/Home/components/HomeView.js

import React from 'react'
import './HomeView.scss'

class HomeView extends React.Component {
  render() {
    return (
      <div>
        <h4>Home</h4>
        <div id="g-signin2" data-onsuccess={this.props.signin} />
      </div>
    )
  }

  componentDidMount() {
        gapi.signin2.render('g-signin2', {
            'scope': 'profile email',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'dark'
        });
  }
}

HomeView.propTypes = {
  signin : React.PropTypes.func.isRequired
}

export default HomeView

routes/Home/modules/home.js

export const HOME_SIGNIN = 'HOME_SIGNIN'

export function signin(newUser) {
    return {
        type: HOME_SIGNIN,
        payload: newUser
    }
}

export const actions = {
    signin
}

const ACTION_HANDLERS = {
  [HOME_SIGNIN] : (state, action) => {
      debugger;
      return Object.assign({}, state, {user: action.payload});
  }
}

const initialState = {
  user: null
}
export default function homeReducer(state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type];

  return handler ? handler(state, action) : state;
}

routes/Home/containers/HomeContainer.js

import {connect} from 'react-redux'
import {signin} from '../modules/home'

import HomeView from '../components/HomeView'

const mapDispatchToProps = {
  signin
}

const mapStateToProps = (state) => ({
  user: state.user
})

export default connect(mapStateToProps, mapDispatchToProps)(HomeView)

routes/Home/index.js

import HomeContainer from './containers/HomeContainer'

export default (store) => {
  component : HomeContainer(store)
}

routes/index.js

import CoreLayout from '../layouts/CoreLayout'
import HomeRoute from './Home'

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : HomeRoute(store),
  childRoutes : []
})

export default createRoutes

回答1:

you actually are correctly wrapping your component class in connect(). Your problem is elsewhere, in routes/Home/index.js:

import HomeContainer from './containers/HomeContainer'

export default (store) => {
  component : HomeContainer(store)
}

the default export of HomeContainer is the higher-order class returned by connect. You're then trying to use HomeContainer as a function here, just like your console error says:

    HomeContainer(store)

回答2:

You can wrap a React component, whether it's a class or a functional component, with react-redux connect.

class MyDiv extends React.Component {
  render() {
    return <div>hi</div>
  }
}

export default connect(({ stateStuff }) => ({ stateStuff }))(MyDiv);

来源：https://stackoverflow.com/questions/42448386/react-redux-connect-cannot-wrap-component-defined-as-a-class-extending-react-c

标签

reactjs

react-redux