3

私の React アプリでは、どこからでもアクセスできるようにする必要があるデータを保存する必要がありますが、単体テストとスタイルガイド。

私が意味するデータは、たとえば次のとおりです。

  • ブラウザのビルドと Node.js にある定数IN_BROWSERです。truefalse
  • IS_MOBILEブラウザの起動時に初期化される定数
  • 現在ログインしているユーザーのデータ、
  • 接続先の API の URL (構成に応じて、ローカルホスト、ステージング サーバー、またはプロダクション)

現在sessionData.js、このデータを格納する という名前のファイルがあり、必要なときはいつでもrequire('./sessionData')自分のコードでそれを使用します。を使用して単体テスト用にモックできますrewire。それらは順次実行されるため、今のところ問題なく動作します。各例が異なるユーザーの視点からビューを表示できるため、スタイルガイドにとっては問題があります (理想的には、各例には独自の がありますsessionData)。

IN_BROWSERこれはglobal、すべてのモジュールの初期化コードに暗黙の依存関係を置くため、これも悪い考えであることが判明しました。

sessionData階層の下のすべてのコンポーネントに小道具を介して自分のものや他のものを渡すことができることがわかりましたが、これは多くの冗長性のようです。

それをよりよく解決するための設計パターンはありますか?

4

4 に答える 4

1

私があなたを正しく理解しているなら、データ構造を props を介して必要なすべてのコンポーネントに渡すだけではどうですか? 明らかに、props を使用して変更することはできませんが、そのデータ構造内には、次のような構造を持つものを更新するためのコールバック関数をいつでも含めることができます。

structure = {
  dataItem1: stuff,
  dataItem2: stuff2,
  dataItemCallback: { var foo = stuff here; }
}

これを次のように呼び出すことができます。

this.props.structure.dataItem1;
this.props.structure.dataItem2;

いつでも呼び出すことができるものを更新するには：

this.props.structure.dataItemCallback(newData);

また、小道具を介して渡すと、構造内の何かが変更された場合にすべてのコンポーネントを再レンダリングできるようになりました。

于 2015-11-18T14:46:32.690 に答える
1

私は Webpack を使用しており、DefinePluginこれを処理するというプラグインがあります。アプリ構成の詳細のほとんどを配置する場所なので、これは良い習慣だと思います。

たとえば、私の webpack 構成には次のものがあります。

new webpack.DefinePlugin({
  'process.env': {'NODE_ENV': JSON.stringify(options.env)}
}),

したがってprocess.env.NODE_ENV、バックエンドと同様にフロントエンドでも使用できます。

ここで webpack 構成をオープン ソース化しました: https://github.com/agendor/react-webpack-sample/blob/master/webpack.config.js

そして、ここにプラグインのドキュメントへのリンクがあります

単体テストでは、test-helper.jsいくつかのグローバル変数を定義するクラスを使用し、すべてのテストの最初にそれを必要とします。これが良い習慣かどうかはわかりませんが、私たちのプロジェクトではうまく機能しています。テストは webpack なしで実行します。これらのグローバル変数の一部を処理するテスト用に特定の webpack 構成を用意することをお勧めします。

于 2015-11-16T14:22:01.203 に答える
0

反応contextする方法のようです。

残念ながら、API は現在安定していません。たとえばReact.withContext、0.13-alpha で非推奨になり、ドキュメントでは API は将来変更されると書かれていますが、コンテキスト自体は非推奨になることはないようです。

于 2015-11-18T11:53:34.150 に答える
0

場合によっては、コンポーネントをリファクタリングして、必要なデータをグローバルな状態にする代わりに直接渡すことができます。これで問題が解決するわけではありませんが、問題を大幅に軽減できます。ダン・アブラモフからの素晴らしい説明は次のとおりです。

ここに画像の説明を入力

于 2015-11-23T10:19:55.467 に答える