問題タブ [redux-store]

Redux が React (または他の一般的なフレームワークと思われます) と連携して使用されているのを見たことがありますが、各状態の変化は UI の変化に関連しています。React コンポーネントから完全に切り離された redux を使用して、イベント駆動型プログラミングを実現できないかと考えていました。しかし、React はuseEffect変数の変更をリッスンするためのフックを提供してくれます。

それでredux、すぐに使えるイベントリスナーを提供しますか？
必要な状態変数を取得する機能を保持したいのですが、ロジックを実行したり別のアクションをディスパッチしたりするために、この変数の別のイベント リスナーにuseSelector置き換えたいと考えています。useEffectアプリの状態に応じて特定のコードを適用するだけで、何かをレンダリングする必要はありません。これはredux環境でのみ行うことができますか?

TL;DR:状態は正しく更新されますが (Redux DevTools から表示)、状態が「未定義」であると表示されているため (スクリーンショットを添付)、ローカル ストレージには保持されません。

説明: Redux は初めてです。状態をローカル ストレージに保存しようとしています。Redux DevTools とconsole.log()ステートメントから表示すると、状態は正しく更新されています。しかし、アプリケーションのローカル ストレージを確認すると、状態が未定義であることがわかります。

私がやろうとしていること: コンポーネントの1つで「追加」ボタンを押すたびに、カートにサービスを追加しています(ブラウザのローカルストレージに保存したい)。

Redux DevTools とブラウザのローカル ストレージのスクリーンショットは次のとおりです。

問題を見つけて修正するのを手伝ってください。

myおよび localStorage 関数App.jsを含むルート コンポーネントのコードは次のとおりです。Redux Store

私のでは、カートに新しいアイテムを追加するアクションをReducer.jsディスパッチしています。INCREASE

誰かが mapStateProps の冗談のテスト ケースを書くのを手伝ってくれませんか。どこでもすべての質問を読みましたが、これに関連することはできませんでした。

コンポーネントコード

レデューサー:

カバレッジを実行すると、この関数がカバーされていないことが示されます。mapStateProps のテスト ケースを作成する方法がわかりません。誰か助けてください。

私のアプリは次のようなものです：

ギャツビープロジェクト

index.tsx - アプリのエントリ ポイント - 私が呼び出す

HomePage.js の使用mapStateToPropsと使用connect(mapStateToProps)(HomePage)

もちろん、HomePage 内では、複数の React コンポーネントを使用しています。そして、ストアを利用して、その上で発生するすべての読み取り/書き込みを行うことができますHomePage。

私のホームページには、へのリンクがありますActivityPage。このページをクリックしてそこに着陸すると、問題が始まります。

ActivityPage は、タスクを達成するために複数のサブコンポーネントを利用します。ActivityPage から読み取り/書き込みにアクセスするにはどうすればよいですか?

useDispatchストアに書き込むことも読み取ることもできません。ReactDev ツールでストアを確認できますが、読み書きしようとすると 11 個のエラーが発生します。ほとんどの場合、コンポーネントをラップする必要があるという行に沿っています。<Provider>

Stack Overflow でさまざまなソリューションを読みました。これは、ストアにアクセスする必要があるコンポーネントを持っmapStateToPropsて使用する必要があることを示唆しています。connect

「新しいページ」からストアへのアクセスを特に探しているため、これは機能していません。子ページ用に別のストアを作成する必要がありますか? 助けてください。 :