javacriptのcamelcaseプロパティにsnake-case APIの応答を変換するのに最適な場所はどこですか

Question

私はsnake_casedjsonを使ってリソースを記述するdjango APIを持っています。私はまた、APIを消費するReactアプリを持っています。 Snakecaseされたプロパティを別々の場所、たとえばAPIレンダラーやコンポーネントレベルでマップすることができました。

この変換をどこに適用するのがベストプラクティスですか？

Answer 1

あなたが消費するAPI関数の周りにラッパーを構築することができます。要求と応答のペイロードを変換するには、humpsのようなヘルパーライブラリを使用します。できるだけAPIコールを閉じるようにしてください。

'humps'から{camelizeKeys、decamelizeKeys}をインポートします。

$.post("/postendpoint", 
    decamelizeKeys({ 
     fooBar: "zoo", 
    }), 
    function (data, status) { 
     doSomething(camelizeKeys(data)); 
    } 
); 

Answer 2

あなたのコンポーネントの状態クリーナーを維持し、クライアントのAPIレベルでそれをやって、あなたが複数のコンポーネントに変換を適用すると言った場合よりも少ない反復/関数呼び出しを必要とします。 これは、Reactコンポーネントがデフォルトでどのようにレンダリングされるのか（つまり、小道具や状態が変更されるたびに）、レンダリングが不要になるためです。

また、トップレベルのコンポーネントでこれを処理し、不要なレンダリングが発生しないように、shouldComponentUpdateで確認してください。しかし、それは面倒です。

TL; DRは、変換されたAPIデータを使用すると、アプリがAPIを消費レベルで意味ので混乱コードと不要な再レンダリング