在Redux容器中使用更高階的組件

我正在使用Redux來管理我的應用程序的身份驗證狀態，並將Auth作爲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.

我最好的猜測是，它並不像connect -ified組件，當我從AuthWrapper返回它是終極版將創造......這使我對我的問題：

當這些組件創建Redux容器時，React是否支持更高階的組件？如果是這樣，爲什麼React會拋出這個錯誤？

來源

2017-03-01 S. McGraw

也很重要：http://stackoverflow.com/questions/42307736/redux-higher-order-components-same-as-container-components?rq=1 –

這是我的兩美分。我認爲這個錯誤正在其他地方發生。

根據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()

像錯誤狀態一樣，您可能只是簡單地在您的應用程序某處返回無效組件。你的應用可能會拋出錯誤，因爲你沒有在渲染方法的圓括號中包裝回調。

來源

2017-03-01 04:47:07

在Redux容器中使用更高階的組件

回答

相關問題