Under the WrappedComponent can't work normally

[xesrevinu]

routes.js

<IndexRoute component={indexContainer} />

IndexContainer.js

const IndexContainer = (props) => {
  const Component = props.logind ? FeedContainer : WelcomeContainer
  return <Component />
}

FeedContainer.js

@provideHooks({
  fetch: ({ dispatch, getState }) => {
      return dispatch(myAction())
  }
})
class FeedContainer extends Component {
 //...
}

WelcomeContainer.js

@provideHooks({
  fetch: ({ dispatch, getState }) => {
      return dispatch(myAction2())
  }
})
class WelcomeContainer extends Component {
 //...
}

This is normal

{ [Function: Connect]
    displayName: 'Connect(NodesContainer)',
    WrappedComponent: { [Function: NodesContainer] __redial_handlers__: [Object], propTypes: [Object] },
    contextTypes: { store: [Object] },
    propTypes: { store: [Object] },
    __redial_handlers__: { fetch: [Function: fetch] } }

This is WrappedComponent

{ component:
   { [Function: Connect]
     displayName: 'Connect(IndexContainer)',
     WrappedComponent: { [Function: IndexContainer] propTypes: [Object] },
     contextTypes: { store: [Object] },
     propTypes: { store: [Object] } } }

No redial_handlers should be have a problem I should be in another way? How to do it Thanks 😄

[max-degterev]

I have stumbled upon a similar situation. Sometimes you'd just want to fetch things in children of Route components.

How about traversing components tree top-bottom in search of "hooked" components? Should be very straightforward using React.children helper.

Fix for wrapped component: https://github.com/coodoo/react-redux-isomorphic-example/blob/master/common/utils/fetchComponentData.js

[xesrevinu]

Thanks

[RIP21]

Few bytes from me. I already wrote this simple fix in another comment. So check it out here again :)

Sorry for reviving this thread. But if it has clue about problems with High Order Components (HoC) or just Wrappers over others components there is a fix. For example, if you have HOC which is wrapping your secured page component and checks authorization first before rendering a secured page, there is a problem that hooks on this wrapped components are not working. It can be solved with this lines of code

    if (WrappedComponent['@@redial-hooks']) {
      AuthWrapper['@@redial-hooks'] = WrappedComponent['@@redial-hooks'];
    }

It will pull hooks up to the wrapper (HOC) so all of them will be triggered properly :)