I'd like my React based SPA to render on server side (who's not these days). Therefore I want to combine React with react-router, redux and some build layer like isomorphic starterkit.
There is hapi universal redux which joins all together, but I am struggling with how to organize my flow. My data is coming from multiple endpoints of a REST API. Different components have different data needs and should load data just in time on the client. On the server instead, all data for a specific route (set of components) has to be fetched, and the necessary components rendered to strings.
In my first approach I used redux's middleware to create async actions, which load the data, return a promise, and trigger a SOME_DATA_ARRIVED
action when the promise resolves. Reducers then update my store, components re-render, all good. In principle, this works. But then I realized, that the flow becomes awkward, in the moment routing comes into play.
Some component that lists a number of data records has multiple links to filter the records. Every filtered data set should be available via it's own URL like /filter-by/:filter
. So I use different <Link to={...}>
components to change the URL on click and trigger the router. The router should update the store then according to the state represented by the current URL, which in turn causes a re-render of the relevant component.
That is not easy to achive. I tried componentWillUpdate
first to trigger an action, which asynchronously loaded my data, populated the store and caused another re-render cycle for my component. But this does not work on the server, since only 3 lifecycle methods are supported.
So I am looking for the right way to organize this. User interactions with the app that change the apps state from the users perspective should update the URL. IMO this should make the router somehow load the necessary data, update the store, and start the reconciliation process.
So interaction -> URL change -> data fetching -> store update -> re-render
.
This approach should work on the server also, since from the requested URL one should be able to determine the data to be loaded, generate initial state
and pass that state into the store
generation of redux. But I do not find a way to properly do that. So for me the following questions arise:
- Is my approach wrong because there is something I do not understand / know yet?
- Is it right to keep data loaded from REST API's in redux's
store
? - Is'nt it a bit awkward to have components which keep
state
in the reduxstore
and others managing theirstate
by themselfs? - Is the idea to have
interaction -> URL change -> data fetching -> store update -> re-render
simply wrong?
I am open for every kind of suggestion.