ReactReduxSpa boot-server.tsx sending "wrong" initialReduxState to client #889

Closed
opened 2025-08-09 17:18:04 +00:00 by fergalmoran · 0 comments
Owner

Originally created by @HaraldMuehlhoffCC on 3/27/2017

While working on redux stores for my ReactReduxSpa based framework I noticed a problem where the initialReduxState computed in boot-server.tsx didn't include the result of async domainTasks.

The issue is that boot-server.tsx calls renderToString(app), waits for the domainTasks to complete – at this stage store.getState() includes the results from my fetch operation – and then calls renderToString(app) again BEFORE store.getState(). The side-effect of the second call to renderToString(app) is that some data in my redux stores is reset because the actions are firing again and this time the system doesn't wait for the domainTasks to complete (my request action resets the request result and also isLoaded …).

My solution for now is pretty straight-forward. Before the second call to renderToString I save the redux store state:

const initialReduxState = JSON.parse(JSON.stringify(store.getState()));

and use this const instead of store.getState() when setting

globals: { initialReduxState: initialReduxState }

https://github.com/aspnet/JavaScriptServices/blob/dev/templates/ReactReduxSpa/ClientApp/boot-server.tsx

*Originally created by @HaraldMuehlhoffCC on 3/27/2017* While working on redux stores for my ReactReduxSpa based framework I noticed a problem where the `initialReduxState` computed in `boot-server.tsx` didn't include the result of async domainTasks. The issue is that `boot-server.tsx` calls `renderToString(app)`, waits for the domainTasks to complete – at this stage `store.getState()` includes the results from my fetch operation – and then calls `renderToString(app)` again BEFORE `store.getState()`. The side-effect of the second call to `renderToString(app)` is that some data in my redux stores is reset because the actions are firing again and this time the system doesn't wait for the domainTasks to complete (my request action resets the request result and also `isLoaded` …). My solution for now is pretty straight-forward. Before the second call to `renderToString` I save the redux store state: `const initialReduxState = JSON.parse(JSON.stringify(store.getState())); ` and use this const instead of `store.getState()` when setting `globals: { initialReduxState: initialReduxState } ` [https://github.com/aspnet/JavaScriptServices/blob/dev/templates/ReactReduxSpa/ClientApp/boot-server.tsx](https://github.com/aspnet/JavaScriptServices/blob/dev/templates/ReactReduxSpa/ClientApp/boot-server.tsx)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/JavaScriptServices#889
No description provided.