React com React Router e Redux
Last updated
Last updated
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.
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.
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.
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:
