React com React Router e Redux

Como fazer Server Render com Redux

O React Charger Razzle faz um mapeamento do objeto da sua store do Redux no servidor para facilitar o preenchimento dos dados para o carregamento inicial.

Passo a passo

• Primeiro baixe o projeto conforme as instruções no tópico item:

Começando com React Charger

• Após baixar o projeto, caso queira manipular algo relacionado ao redu abra o arquivo ./src/store.js, ele contém todas a lógicas para criar a sua store do Redux.

• Sabendo desse arquivo, tudo começa pelo arquivo ./src/client.js :

• Esse arquivo possui a inicialização normal de uma aplicação React com Redux, porém ao criar a store da aplicação passamos como argumento para a store o valor contido em window.__PRELOADED_STATE__, que nada mais é que o objeto que o servidor gera com os dados que ele irá pré-carregar para nossa aplicação.

Como o servidor pré-carrega os dados?

Sempre que você quiser fazer alguma página ter conteúdo carregado por meio de Server Render, você deve colocar um método chamado getInitialData() na classe do seu componente:

A chave 'repos' no objeto, possui esse nome pois o valor que for carregado ali irá preencher os dados no atributo 'repos' que temos na store do Redux.

Fazendo os dados passarem da store para o Componente

No React Charger, uma das ideias é que você terá container components que irão pegar os dados que vieram de window.__PRELOADED_STATE__ e carregados na versão inicial da store e repassar como props para os componentes: