React-redux connect（）はReact.Componentを継承するクラスとして定義されたコンポーネントをラップできません

Question

何かが見つからない場合がありますが、connect()がクラスとして定義されたコンポーネントをラップする例は見つかりません。（常にReact.Component）単純な関数として定義されたコンポーネントをラップします。このような

コール：HomeView extends React.Componentが、私はCannot call a class as a functionエラーを取得する

connect(mapStateToProps, mapDispatchToProps)(HomeView) 

。

ご協力いただければ幸いです。

編集（コードのammountのため申し訳ありませんが、私は、関連するかもしれないのか分からない）：

ルート/ホーム/コンポーネント/ 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 

ルート/ホーム/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; 
} 

ルート/ホーム/コンテナ/ HomeCont

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) 

ルート/ホーム/ index.js

import HomeContainer from './containers/HomeContainer' 

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

ルート/ 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 

Answer 1

実際には、コンポーネントクラスを正しくconnect()にラップしています。あなたの問題は、ルート/ホーム/ index.jsで、他の場所である：

import HomeContainer from './containers/HomeContainer' 

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

HomeContainerのデフォルトのエクスポートがhigher-order class returned by connectです。

HomeContainer(store) 

：次に、あなたのコンソールエラーが言う同じように、ここでの関数としてHomeContainerを使用しようとしています。

Answer 2

ainer.jsあなたはコンポーネントに反応ラップすることができ、それがクラスであっても機能的なコンポーネントであれ、react-reduxの場合connect。

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

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