Store not getting set on client side during SSR

[ijsnow]

So my mind is kind of being blown right now. I have some code that is essentially copy and pasted from the usage example, but the result from my fetch is not getting stored in the redux store on the client side. I log the data in each step along the way from the then from my fetch in the onEnter method to the redux action to the reducer then to the render for the component. On the server side I see all the correct data being logged but on the client side the store is empty(I don't see any of the data being logged along the way on the client side because thats happening on the server).

// onEnter for the page. just recieves some data to be presented 
static onEnter({store, nextState, replaceState, callback}) {
    fetch('/api/page/home').then(r => r.json())
      .then(res => {
        store.dispatch(setHomepageData(res));
        callback();
      });
  }

// the route in routes.js
<IndexRoute component={isLoggedIn(Homepage)} onEnter={w(Homepage.onEnter)} />

isLoggedIn is just a HOC that passes me a prop telling me if there is a user logged in by looking for the jwt in localStorage. This can't be the problem because I wrapped the Usage component in it too and that still works fine. (<Route path="/usage" component={isLoggedIn(Usage)} onEnter={w(Usage.onEnter)} />)

Redux stuff...

// inside actions.js
export function setHomepageData(data) {
  return { type: SET_HOMEPAGE_DATA, payload: data };
}

// inside reducers.js
function content(state = {}, action) {
  switch (action.type) {
    case SET_HOMEPAGE_DATA:
      return action.payload;
    default:
      return state;
  }
}

export default combineReducers({config, content});

What is mind boggling is that the usage example works just fine and I literally basically copy and pasted. My api endpoint is working correctly(used postman to test). Also if I navigate from another page causing this to not be the initial load, everything works just fine.

Any ideas what could be causing this?

Thanks in advance for any response and thanks for the great starter kit!

[olebedev]

Hi @ijsnow,

thanks for playing with this project.

First, check the initial data from server here - https://github.com/olebedev/go-starter-kit/blob/master/client/router/index.js#L18. Need to check what window['--app-initial'] contains.

[ijsnow]

@olebedev if I log out those values like so...

  const store = createStore(window['--app-initial']);
  console.info('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
  console.info('window[\'--app-initial\']: ', window['--app-initial']);
  console.info('store: ', store.getState())
  console.info('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
  setAsCurrentStore(store);

I get 'window[\'--app-initial\']: ' {} and store: { config: {}, content: {} }

[olebedev]

Ok, next you could log here and curl your page to ensure that this script tag filled out as expected.

[ijsnow]

@olebedev I get console.info('result.initial:', result.initial); -> result.initial: {"config":{},"content":{}}

And the rendered script tag is: <script onload="this.parentElement.removeChild(this)">window['--app-initial'] = JSON.parse("{}");</script>

The usage page still behaves correctly. I'm sure I'm missing something crucial but I can't imagine what.

[vuongngo]

I'm not sure if this causes your problem. Duktape implementation does not include Object.assign which might throw an error. I'm wondering if adding Object.assign polyfill improve your situation. Cheers

[olebedev]

@vuongngo this is not a problem if you use babel.js. Check this out.

[vuongngo]

Thanks @olebedev . My bad, I thought it was included in configuration. Adding babel-polyfill solves it nicely.

[ijsnow]

By the way @olebedev, I'm not working on this anymore. Feel free to close this issue. It may be mucking up the issue list.