問題タブ [react-context]

React初心者です。いくつかの中程度の記事と React ドキュメント (複雑です) を見て、この非常に基本的なContext APIを実装しようとしました。
コンポーネントツリーを介してデータを渡し、子コンポーネントでそれらにアクセスするという正しい結果が得られない理由であるいくつかの基本的なポイントを見逃しました。与えられたコード スニペットを修正する方法と、私が見逃したものを
教えてください。

React Context HOC 関数を作成して、他のコンポーネントを Context でラップして、すべての通知を単一のコンポーネントに送信できるようにしようとしています。いくつかの異なるガイドから実用的なソリューションをつなぎ合わせる必要がありました。主にこれは、元の形式ではまったく機能しなかったためです。

私が最終的に得たのは次のようなものです：

HOC:

環境：

HOC ファイルComponentでは、行内の単語の下に赤い下線が表示されます{value => <Component {...props} notificationContext={value} />}

エラーは次のようになります。

'R & { notificationContext: INotificationContextState | と入力します。ヌル; }' はタイプ 'IntrinsicAttributes & P & { children?: ReactNode; に割り当てられません。}'。'R & { notificationContext: INotificationContextState | と入力します。ヌル; }' は型 'P'.ts(2322) に代入できません

奇妙なことに、このエラーによってアプリの実行が妨げられることはありません。さらに、ラッパー関数は正常に機能し、ラップされたコンポーネントは Notification オブジェクトに通知を渡すことができます。

私の問題の一部は、Omit/Pick 構文に慣れておらず、このコンテキストで "P" の型定義が何であるかを頭の中で正確に理解しようとしていることです。エラーが発生する理由はわかりませんが、それでも機能します。

ログイン後にユーザーの詳細が取得され、一部のユーザー プロファイルにはメトリック設定があり、他のユーザー プロファイルには非メトリック (インペリアル) が設定されるアプリがあります。

React Context にブール値 (isMetric) を設定したいのは、それを参照する必要があるステートレス コンポーネントがいたるところにあり、コンポーネント階層全体に isMetric prop を渡さないようにしたいからです。

私はhttps://reactjs.org/docs/context.htmlで React 16 の例に従ってきたので、次のようなものがunit-context.jsあります。

そしてApp.jsの

上記は、toggleUnits状態 (コンテキスト) を設定できるようにコンテキスト自体に提供する動的パターンです。

上記のパターンで、コンポーネントで isMetric 値に問題なくアクセスできることを確認しました。

しかし、私は redux-saga を使用して API 呼び出しを処理し、ユーザーのメトリック/非メトリック設定を取得しています。

ユーザーの詳細を取得したら、Context を設定するにはどうすればよいですか? (redux-saga には独自のコンテキストの側面があるようですが、React Context について言及しています)。

1 つのオプションは、UnitContext をインポートすることです。

import { UnitContext } from '.unit-context';

次に、Consumer にアクセスして状態と関数を取得します。しかし、命令型コードである redux-saga saga で通常 Component となるものを参照する方法がわかりません。

または、アプリの状態を redux に移動できますか? reduxストアで機能するのは奇妙で不健全に思えます。selectredux-saga がセレクターを介して redux ストアにアクセスする方法を提供していることを知っており、過去にそれを使用しました。

アップデート：

それまでにコンテキストが提供されるため、おそらく、ローカル状態を使用する代わりに、その値プロパティ設定を redux ストア値に<UnitContext.Provider value={this.state}>置き換えることができます。