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:
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:
Last updated