Reduxコンテナで上位コンポーネントを使用する

Question

まず、いくつかのコンテキスト。

私はReduxを使ってアプリケーションの認証状態を管理しており、をReduxコンテナ（またはスマートコンポーネント）として持っています。

私はAuthを取り、それを返すラッパー（高次成分）作成しました：

export default function AuthWrapper(WrappedComponent) { 
    class Auth extends Component { 
    ... <Auth stuff here> ... 
    } 
    return connect(mapStateToProps, mapDispatchToProps)(Auth); 
} 

ラッパーを使用するためには、私はちょうどでそれを呼び出すために必要があると私には思えます私は私の認証の背後に持っているコンポーネントです。例えば、アラカルト、のは、私がラッパーでUserPageと呼ばれるコンポーネントを認証していましょう：私はこのようなラッパーを使用する場合

const AuthenticatedUserPage = AuthWappper(UserPage)

しかし、私と一緒に幸せではない反応します。私は次のエラーを取得する：

Warning: AuthenticatedApp(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 

は私の最高の推測では、私の質問に私をリードしている...それは私がAuthWrapperからそれを返すとき再来が作成されますconnect -ifiedコンポーネントを好きではないということです。

Reactは、これらのコンポーネントがReduxコンテナを作成するときに高次コンポーネントをサポートしますか？もしそうなら、Reactがなぜこのエラーを投げているのだろう？

Answer 1

ここは私の2セントです。私はエラーが他の場所で発生していると思います。

react-reduxのconnect関数のこの簡略化されたバージョンによれば、connect関数は単に別の反応コンポーネントを返すだけです。したがって、あなたのケースではは、別のコンポーネントの中にラップされたコンポーネントを返していますが、これはまだ有効です。 コンテナは基本的にコンポーネントです。

https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424eを読んで、接続機能をよりよく理解してください。

私も自分のアプリケーションで次のように試してみました。

import Layout from '../components/Layout' 
//Do some other imports and stuff 
function wrapper(Layout) { 
    return connect(null, mapDispatchToProps)(Layout); 
} 
export default wrapper() 

エラー状態と同様に、無効なコンポーネントがアプリのどこかに返されている可能性があります。レンダリングメソッドのカッコでリターンコールをラップしていないため、アプリでエラーが発生している可能性があります。