Razzle: Os exemplos de Redux têm o aviso de HMR do provedor

Criado em 6 out. 2017 · 5Comentários · Fonte: jaredpalmer/razzle

Reproduza, git clone.
exemplos de cd / com-redux
fio
início do fio

em seguida, altere qualquer arquivo, por exemplo, common / components / Counter.js, HMR funcionará, mas o navegador soará o seguinte aviso

<Provider> does not support changing store on the fly. It is most likely that you see this error 
because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers 
automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

Tentei pesquisar este erro no Google, mas não encontrei nenhuma solução alimentar para ele. Alguém consegue superar isso?

Fonte

howardya

Comentários muito úteis

Adicione key={Math.random()} prop a <Provider> . Deve corrigir esse aviso.

Metnew em 8 fev. 2018

👍4 🎉1

Todos 5 comentários

Eu adicionei o seguinte código ao arquivo client.js e ele remove o aviso.

if (module.hot) {
  module.hot.accept();
  module.hot.accept('./App', () => {
    hydrate(
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>,
      document.getElementById('app')
    );
  });
}

Alguém tem alguma visão disso?

howardya em 9 out. 2017

Você pode enviar um PR?

jaredpalmer em 22 nov. 2017

Adicione key={Math.random()} prop a <Provider> . Deve corrigir esse aviso.

Metnew em 8 fev. 2018

👍4 🎉1

A solução de @howardya é a melhor aqui. Usar uma chave aleatória silencia o aviso, mas não altera o fato de que o armazenamento está sendo recriado a cada atualização, o que não é compatível. Isso pode levar a algum comportamento instável, especialmente se você estiver usando redux dev-tools ou similar.

Manipulando especificamente o módulo ./App , isso capturará virtualmente todas as atualizações, exceto para redutores, que já são tratados separadamente. Isso deixa as alterações em configureStore.js e client/index.js si como não manipuladas. Você pode deixar o catch-all ativado, que executaria tudo novamente e ainda causaria o aviso, ou removê-lo, o que acionaria o recarregamento da página. Acho que o último seria mais correto aqui.

Vou dar uma olhada em como fazer um PR para isso.