問題タブ [use-reducer]

useContext() と useReducer() を使用して、redux を取り除いて別のパッケージを保存し、状態管理の新しい方法を学びたいと考えています。ブロッカーに当たりました。

レデューサーがペイロードを更新した後のログイン ページ。以下のスクリーンショットで確認できます。Context.Provider と reducer の値が更新されていることがわかりますが、console.log('context') を実行すると、まだ初期値が取得されます。

コンポーネント間で更新されたペイロードを共有したいのですが、これをネイティブに行う唯一の方法は localStorage ですか? または、概念的に何かが欠けていますか。

前もって感謝します。

ここに私のApp.tsxがあります

これが私のAuthProviderです:-

これが私のauthReducerです:-

ここに私のログインページがあります:-

私はコーディングにまったく慣れていないので、現在useReducer()React でフックを練習して、単純な todo アプリで状態を管理しています。TOGGLE_TODO アクションを実装しようとすると問題が発生します。配列を使用する前にそれを行ったことがありますが、多くのオブジェクトを操作する可能性が高いため、これを正しくできない理由を理解しようとしています。私は失敗することで学んでいると言えますが、私が学んでいるのは、コンピューターの電源を切って立ち去る方法だけです!

トグルするたびに、spread operator を使用して状態を渡します。すべてのアイテムで試してみました。ログアウトしkey、action.payload一致していることを確認しました (これは、一致する単純なアラート）。

トグルがまだトグルではないことは承知しています。単純に になろうとしていただけcompleteですtrue。

状態を返すために多くのことを試しました。ステートメントの先頭に return を追加しました。途中でいくつかの奇妙なバグに遭遇しました。前述のように、これは今のところ非常に単純な状態ですが、私が取り組んでいる別のプロジェクトではより複雑になるため、useState get は非常に面倒です。

ここで私が間違っていることについての助けをいただければ幸いです。

レンダリングでは、 をkeyas として渡しid、ペイロードとともに返されるようにします。これがコンポーネントのdispatch関数です...

レンダリングはObject.entriesすべて正常に機能するものを使用しています。エラーが出たり、イニシャルtodoが消えたりすることがあったので、状態が正しく更新されていないことはわかっていました。

こちらも CodeSandbox のコードです。動作するようになったらここで更新しますが、ここで数日立ち往生しています。:-(

アプリ全体で再利用するカスタム フックを作成していますが、コード内のコメントからわかるように、予期しない結果が得られました。 console.log しかし、それらは2回ディスパッチされ、状態の値を取得しようとしたときに、いくつかのアクションをディスパッチした後、期待される状態を取得できませんでした。デフォルトのものを取得しました。

コンポーネントでは、このフックコードを使用しました

私は本当にこのカスタムフックアプローチを続けたいと思っていますが、これらのバグは誰かが助けてくれることを本当に願っています. ありがとう

私は、React Context API と useReducer および useContext フックを使用して、奇妙な状況で頭を壁にぶつけています。

ここが私の本店です。

これが私の Reducers 関数と私の Action タイプです:

反応ポータルを条件付きでレンダリングするために使用される編集プロパティ内に表示プロパティがあります。以下を参照してください。

実際の編集調査コンポーネントは次のとおりです。

私の問題は、ポータルの閉じるボタンをクリックすると、HIDE_SURVEY がディスパッチされ、すぐに DISPLAY_NEW_SURVEY がディスパッチされることです。

私は一生これを理解することはできません。どんな助けでも大歓迎です。

ありがとう！

更新: 問題はレデューサーに直接あり、onClick 関数や deleteLastItem 関数とは関係ありません。これをconsole.logsでテストしましたが、明らかに2回繰り返されるのは、レデューサーに直接あるものだけです。

フック useReducer と useContext を同時にテストしていたのは、それらが非常にうまく連携できると思ったからですが、どうやら、関数を onClick 関数に設定すると、2 回トリガーされます。配列から最後のアイテムを削除しているため、1 つではなく 2 つのアイテムが削除されます。

コンテキストとレデューサー フックが格納されているファイルは次のとおりです。

ご覧のとおり、console.log("hey"), は、それが 2 回実行されていることを示しています (画面内のアイテムが一度に 2 回消去されていることを除いて)。

コンテキストが取り込まれ、問題が発生するコンポーネントは次のとおりです。

そして最後に、ここに app.js があります。役に立つとは思いませんが、念のため: