0

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

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

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

export const UnitContext = React.createContext({
  isMetric: true,
  toggleUnits: () => {},
});

そしてApp.jsの

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

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleUnits = () => {
      this.setState(state => ({
        isMetric: !state.isMetric
      }));
    };

    this.state = {
      isMetric: true,
      toggleUnits: this.toggleUnits,
    };
  }

  render() {
    return (
      <UnitContext.Provider value={this.state}>
        < ... />
      </UnitContext.Provider>
    );
  }
}

上記は、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}>置き換えることができます。

4

0 に答える 0