問題タブ [hot-module-replacement]

私は物事を機能させようとしていますが、成功することはできません。最初に次のエラーが表示されます。

index.android.jsページの指示に従いましたが、ストアの作成を に入れ、それをプロップとして渡す必要があることを理解するのは困難でした。HMRは再レンダリングを行わないため、ストアが再度作成されることはありません。しかし、私は最終的にエラーを取り除きます。

たとえば、初期状態のレデューサーを変更すると、ストアがmodule.hot.accept関数内の関数内で更新されていることがわかります。App/Redux/createStoreApp/Redux/SearchRedux

しかし、レデューサーを編集すると、アプリケーションの状態がまったく更新されません! さらに悪いことに、これを行うと、アプリ全体が状態から切断されます (ただし、この単純なアプリを例に挙げていないので、再注入されない状態に焦点を当てます)。私はそれを見ることができますApp/Navigation/ReduxNavigation

リポジトリを複製することで、バグを簡単に再現できます。

私は今朝からこれに苦労しています。時間が長くなり始めたので、ようやくSOに投稿しました。私はこの問題に関連する多くのものを読みましたが、何かが欠けていることは明らかです。

PS: 最初に、コードで何を意味するかを直接確認できるように、ファイルへの多くのリンクを含めてこれを書きました。しかし、このサイトを数年間使用しているにもかかわらず、評判はほとんどありません (今回ではなく、常に回答を見つけたためです)。この質問は、リポジトリの readme のリンクで見つけることができます。

ありがとう

Dan Abramov によるこのMedium の投稿を読んだ後、webpack を使用して非常に基本的な HMR (react-hot-loader なし) を試しました。

エントリindex.js

ウェブパックの設定

私の質問は、なぜ React アプリの HMR が単に で動作するのmodule.hot.accept()ですか?

私の理解では、webpack の HMR は、ファイルの変更を検出するための単純な API のみを提供します。これらの変更を処理する方法は、ローダーによって異なります。スタイルローダーは.cssファイルを処理します。また、React アプリのコンテキストでは、.jsモジュールへの変更は react-hot-loader によって管理される場合があります。

または、Medium postに従って、次のように管理できます。

では、なぜ実行するだけで実行module.hot.accept()と同じ結果が得られるのrender(<UpdatedApp />, document.getElementById('app'))でしょうか?

パッケージのバージョン