react router redux initial state setting on isomorphic app

Question

I am writing an isomorphic app with react, redux, react-router, react-router-redux. I am calling syncHistoryWithStore on client.js. But on initial load, router.locationBeforeTransitions is always null. It is populated once I navigate though.

const history = syncHistoryWithStore(browserHistory, store);
...

<Router routes={routes} history={history} />

Above code is from client.js

Should I fire LOCATION_CHANGE action on server side manually to populate initial state of react-router-redux?

offtopic a bit, but I am getting into isomorphic and curious if you could share any resources you have on doing it? — james emanon
– james emanon, Commented Nov 21, 2016 at 3:20
sure. I forked from this boilerplate. github.com/CrocoDillon/universal-react-redux-boilerplate — sean
– sean, Commented Nov 21, 2016 at 17:32
and also blog.tableflip.io/server-side-rendering-with-react-and-redux explains in detail — sean
– sean, Commented Nov 21, 2016 at 17:32

yadhu · Accepted Answer · 2016-11-21 01:14:10Z

2

You will be creating a new store on client hence the state from the store created on server is lost. We will need to pass the initial state from server to the client, so it can populate its store.

on Server:

const initialState = store.getState();

now add this to your HTML template rendered from server:

<script type="application/javascript">
  window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>

on Client:

let initialState = window.__INITIAL_STATE__;

use the initialState when you createStore on Client.

answered Nov 21, 2016 at 1:14

yadhu

15.6k7 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sean Over a year ago

Thanks for your answer. FYI, I am already doing that, but I could see that the state for react-router-redux is { locationBeforeTransitions : null}.

sean Over a year ago

I asked react-router-redux team, and they say I shouldn't map locationBeforeTransitions into props. I should use locations.pathname from react-router and it worked fine!

Collectives™ on Stack Overflow

react router redux initial state setting on isomorphic app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related