It’s components all the way through

In the current React project I’m working on, every entryPoint in webpack is an index file which does something like:

// Initialize the flux stores
SomeAction.init(window.someData)
SomeOtherAction.init(window.someOtherData)
render(<MyRootComponent />, app)

I first initialize the flux stores and then have to render the component. If I do it the other way it won’t work. This idea seemed harmless so far, until I started looking at server rendering options.

Server rendering has to be done like this:

 usersList = db.get(‘users’)
RenderedComponent = render_component(
path=os.path.join(
os.getcwd(), ‘path’, ‘to’, ‘MyRootComponent.jsx’
),
props={
‘usersList’: usersList
},
to_static_markup=False
)

We directly pass the path of the component to be mounted along with its props. There is no room for store initialization.

The solution I’ve come up with now is to do the flux store initialization in the RootComponent’s `constructor()` or `componentWillMount()` methods. This way, server rendering can be done.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.