トラブルシューティング
#reduxチャンネル(Reactiflux Discordコミュニティ)は、Reduxの学習と使用方法に関するあらゆる質問のための公式リソースです。Reactifluxは、交流し、質問をし、学ぶのに最適な場所です - 参加してください!
#reduxタグを使ってStack Overflowで質問することもできます。
ビューが更新されません!
簡単に言うと、
- Reducerは決して状態を直接変更してはならず、新しいオブジェクトを返す必要があります。そうでなければ、React Reduxは更新を認識しません。
- 実際にアクションをディスパッチしていることを確認してください。例えば、`addTodo`のようなアクションクリエイターがある場合、インポートされた`addTodo()`関数を単独で呼び出すだけでは何も起こりません。これは、アクションを返すだけで、ディスパッチしないためです。`dispatch(addTodo())`(フックAPIを使用する場合)または`props.addTodo()`(`connect` + `mapDispatch`を使用する場合)を呼び出す必要があります。
コンテキストとpropsのいずれにも"store"が見つかりません
コンテキストの問題がある場合、
- ページ上にReactの重複インスタンスがないことを確認してください。
- プロジェクトにReact Reduxの複数のインスタンス/コピーがないことを確認してください。
- ルートコンポーネントまたは他の祖先コンポーネントを
<Provider>
でラップすることを忘れないでください。 - ReactとReact Reduxの最新バージョンを実行していることを確認してください。
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you’re trying to add a ref to a component that doesn’t have an owner
ウェブでReactを使用している場合、これは通常、Reactの複製があることを意味します。リンクされている手順に従って修正してください。
単体テストでuseLayoutEffectに関する警告が表示されます
ReactDOMは、`useLayoutEffect`が「サーバー側」で使用されている場合、この警告を出力します。React Reduxは、ブラウザコンテキスト内で実行されているかどうかを検出することで、この問題を回避しようとします。Jestはデフォルトでブラウザ環境を十分に定義しているため、React Reduxはブラウザ内で実行されていると誤認し、これらの警告が発生します。
単一のテストファイルに対して`@jest-environment`を設定することで、警告を防ぐことができます。
// my.test.jsx
/**
* @jest-environment node
*/
または、グローバルに設定することもできます。
// package.json
{
"name": "my-project",
"jest": {
"testEnvironment": "node"
}
}
https://github.com/facebook/react/issues/14927#issuecomment-490426131を参照してください。