[universal-redux] Hydrate store "on page load"

[diegohaz]

[universal-redux] Hydrate store "on page load"

[diegohaz]

Hi, @0xsven

I'm currently working on a project that implements it. It's still unfinished, but you can check that out to see how this works: https://github.com/tramaLabs/web

These are the steps to implement that:

1. First you need to install some isomorphic cookie handler. I'm using react-cookie;

2. Create methods to automatically set tokens to the API requests on your API handler:

// ...
export const setToken = (token) => {
  api.defaults.headers.common['Authorization'] = `Bearer ${token}`
}

export const unsetToken = () => {
  delete api.defaults.headers.common['Authorization']
}
// ...

See src/services/api/index.js

If you do not want to do that, you'll need to add the token for each request.

3. Create a store to handle authentication and save/remove cookies on sagas:

// ...
import cookie from 'react-cookie'
import { setToken, unsetToken } from 'services/api'

// ...

export function* loginFlow () {
  while (true) {
    const { token } = yield take(AUTH_SUCCESS)
    yield [
      call(cookie.save, 'token', token, { path: '/' }),
      call(setToken, token)
    ]
    yield take(AUTH_LOGOUT)
    yield [
      call(cookie.remove, 'token', { path: '/' }),
      call(unsetToken)
    ]
  }
}
// ...

See src/store/auth and src/store/auth/sagas.js

4. Get/set the token on the server side:

// ...
import cookie from 'react-cookie'
import { setToken } from 'services/api'
// ...
cookie.setRawCookie(req.headers.cookie)
const token = cookie.load('token')
const memoryHistory = createMemoryHistory(req.url)
const store = configureStore({ auth: { token } }, memoryHistory)
const history = syncHistoryWithStore(memoryHistory, store)

token && setToken(token)
// ...

See src/server.js#L28-L34

5. Get/set the token on the client side:

// ...
import { fromAuth } from 'store'
import { setToken } from 'services/api'
// ...
const initialState = window.__INITIAL_STATE__ // has { auth: { token: 'foo' } }
const store = configureStore(initialState, browserHistory)
// ...
const token = fromAuth.getToken(store.getState()) // getToken is a selector on the auth store

token && setToken(token)

See src/client.js#L14-L22

Tell me if it helps you. I'll add this to the boilerplate soon.

[diegohaz]

Also, read this section on the README for running sagas on the server side.

[0xsven]

Step 4/5 is where I was stuck! Thank you.

I guess the api call "to get user data" I would do in some componentWillMount function of the particular component that needs the data?

Btw. this thing I found quite helpful: https://github.com/mjrussell/redux-auth-wrapper

[diegohaz]

You can do that and it will work on the client, but the server will not wait for the request to complete. There're many ways to solve this problem. The one I like, which is adopted by this boilerplate, is what's done on SamplePage.

The caveat of this approach is that you can't do that on any component, but only on those are used by the router on src/routes.js (essentially pages).