Using higher order components with Redux containers

Question

Firstly, some context.

I use Redux to control the authentication state of my application and Authas a Redux container (or smart component).

I created a wrapper (a higher-order component) that accepts Authand returns it:

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

It seems to me that in order to use the shell, I just need to call it with the component that I want to have behind my auth. For example, suppose I authenticate a component with a name UserPagewith a wrapper, à la:

const AuthenticatedUserPage = AuthWappper(UserPage)

However, when I use such a shell, React does not suit me. I get the following error:

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

, connect, Redux , AuthWrapper..., :

React , Redux? , React ?

Answer 1

. , .

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

, . , .