1

My react component is being showed (and it is complete functional) before going through the render() method.

The project is using the react-starter-kit, and a similar route code can be accessed here.

Router code

In the picture above I'm calling a bunch of actions and then returning the target component (Question).

Part of the component code is in the following image:

Component code

The problem is that the component is available and completely functional before both console.log be called:

Console debugging

In this case the component is available since the fist action call, but the logs are shown after everything. I want to add a loader since the beginning. Anyone have any idea about it?

Community
  • 1
  • 1
Gabriel Siedler
  • 272
  • 3
  • 13
  • looking at the logs, a lot of actions are being called. could you share details of atleast one action where its called, say "SET_QUIZ_TYPE" – Sagi_Avinash_Varma Dec 11 '16 at 17:57
  • Even being lots of actions, all of these are pretty straighforward state-change actions. There is no collateral effect on changing routes or loading different components. – Gabriel Siedler Dec 11 '16 at 18:19
  • I think you should be using async actions http://redux.js.org/docs/advanced/AsyncActions.html – diedu Dec 11 '16 at 19:57

1 Answers1

1

That's probably the component being rendered on the server-side.

Since it will set all flags/states to "loaded" because it was rendered it might cause conflicts with the frontend scritps.

To avoid such conflicts you can check if your code is running on frontend or backend using:

const isBack = typeof window === 'undefined';

If there is no DOM available then it is on the server.

BrunoLM
  • 97,872
  • 84
  • 296
  • 452