問題タブ [pure-function]

私たちの JavaScript 開発者チームでは、純粋な機能コードを書くための redux/react スタイルを採用しています。ただし、コードの単体テストに問題があるようです。次の例を検討してください。

processこの関数呼び出しは、 、 、および の呼び出しに依存してextractBarおりextractBaz、それぞれが他の関数を呼び出すことができます。data一緒に、それらは、テスト用に構築されるパラメーターの重要なモックを必要とする場合があり ます。

そのようなモック オブジェクトを作成する必要性を受け入れて、実際にテストで作成すると、読み取りや保守が困難なテスト ケースがあることがすぐにわかります。さらに、 の単体テストのように、同じことを何度もテストすることにつながる可能性が非常に高く、おそらくそれprocessも書かれるべきです。インターフェイスを介してこれらの関数によって実装される可能性のある各エッジ ケースのテストは扱いにくいです。extractBarextractBazfoo

いくつかの解決策を念頭に置いていますが、どちらも以前に見たパターンのようには見えないため、どれも気に入りません。

解決策 1:

解決策 2:

foo解決策 2では、依存する関数呼び出しの数が増えると、メソッド シグネチャが急速に汚染されます。

解決策 3:

複雑な複合操作であるという事実を受け入れてfoo、全体としてテストしてください。すべての欠点が当てはまります。

他の可能性を提案してください。これは、関数型プログラミング コミュニティが何らかの方法で解決したに違いない問題だと思います。

redux-devtools 私はウォークスルーを読んだ：

DevTools で正しく動作するには、リデューサーが純粋で、副作用がない必要があります。たとえば、レデューサーでランダム ID を生成しても、不純で非決定論的になります。代わりに、アクション クリエーターでこれを行います。

これらの言葉は、ランダム値の生成について述べています。しかし、現在の状態に基づいて一意の値を取得するのはどうですか? たとえば、データを現在の状態に格納するときに、配列の長さを要素の ID として取得します。配列の値を削除しない限り、一意であることが保証されます。これは関数を不純にしますか?

または、次のように現在の状態に基づいて条件値を作成します。

または、より極端に、次のような関数内にのみ存在する定義済みの値を持つことによって:

では、これらの例は関数を不純なものにしていますか? そうでない場合、渡された値 (状態とアクション) からのみ実行された場合でも、長くて複雑な計算または重くネストされたレデューサーを作成することは、redux で悪い習慣ですか?

現在のプロジェクトでは、次のような形式のデータを返す API を使用しています。

上記の形式のオブジェクトと、それぞれを にマッピングするオブジェクトを取り、同じ構造を返しますが、それぞれに対応する を含む純粋な関数を作成したいと思います。mapValuesnamevaluepointvaluename

たとえば、呼び出すと次のようにmapValues(data, { name1: "value1", name2: "value2", name3: "value3" })返されます。

これが私の最初のパスです：

これは機能しますが、重複するコードをかなり入れ子にしています。2 回目の試行では、再帰に到達しました。

これも機能しますが、読みにくく、あまり簡潔ではありません。

Lodash を使用してオブジェクトを再帰的にマップするよりクリーンな方法はありますか? 理想的には、機能的なアプローチを探しています。

ここにgenerateBlocks、配列blocksと関数を受け取る関数がありますonBlockClick。各オブジェクトが と の 2 つのプロパティlabelを持つオブジェクトの配列を返しますonClick。

戻り値をテストできません。テストケースは次のとおりです。

関数参照が異なるためexpected、as を作成できません。[[{label: "A", onClick: ()=>onBlockClick("A")},...]

では、generateBlocks 関数をリファクタリングしてテスト可能にするにはどうすればよいでしょうか。

純粋関数は外部メソッドを呼び出すことができますか?

例えば：

jumpTwice()と見なすことができますpure functionか？

シンプルな todo アプリを実装することで、react と関数型プログラミングを学ぼうとしています。親と子の間で情報を渡すという概念を見ようとしているだけなので、フラックスは使用していません。子のクリック イベントで親の関数をトリガーしようとしています。ただし、純粋な関数と状態の使用に関して、React から非常に厄介なエラーが発生します。誰かが私が間違っていることと、物事を行う正しい方法を説明できますか? 私の機能について不純なものは、私が作成している副作用がわかりません。これが私のコードです：

どんな助け/説明も大歓迎です!

これはエラーです: bundle.js:9139 警告: setState(...): 既存の状態遷移中 (renderまたは別のコンポーネントのコンストラクター内など) に更新できません。Render メソッドは props と state の純粋な関数であるべきです。コンストラクターの副作用はアンチパターンですが、componentWillMount.