web-dev-qa-db-ja.com

React-Reduxアプリケーションのユーティリティ関数はどこに配置しますか？

React-Reduxアプリケーションでは、次のような状態になっています。

_state = {
    items: [
        { id: 1, first_name: "John", last_name: "Smith", country: "us" },
        { id: 2, first_name: "Jinping", last_name: "Xi", country: "cn" },
    ]
}
_

Reactコンポーネントを使用してレンダリングします。

今、私は私に人の「フルネーム」を与える関数が必要です。したがって、「first_name + last_name」だけでなく、国によって異なります（たとえば、中国では「last_name + first_name」になります）。そのため、比較的複雑なロジックがあります。 Reactコンポーネント。

In OOPこの情報を提供するPerson::getFullName()メソッドを作成しますが、stateオブジェクトはサブオブジェクトが「ダム」オブジェクトです特別なメソッドはありません。

それでは、React-Reduxでこれを管理する一般的な推奨方法は何ですか？私が考えることができるのは、ユーザーを取得してフルネームを返すuser_getFullName(user)などのグローバル関数を作成することですが、それはあまりエレガントではありません。なにか提案を？

javascriptoopreactjsreduxutility-method
27
laurent

私のアプリケーションでは、このような場合にライブラリを作成するアプローチに従いますが、これまでのところ、これは非常にうまく機能しています。

この場合、私は新しいモジュールを作成する、例えば_{ComponentRoot}/lib/user.js_は、状況に応じて、関数getFullName(user)またはgetFullName(firstName, lastName, country)をエクスポートします。

これは機能を必要とするモジュールをインポートするの問題であり、グローバル関数は不要です：

_import React from 'react'
import {getFullName} from '../lib/user'

const Title = ({user}) =>
    <div>
        {getFullName(user)}
    </div>
_

ライブラリフォルダーをコンポーネントフォルダーなどと同じレベルに配置しますが、最適な方法はすべて実行する必要があります。

27
Timo

まず、 Reduxはアプリケーションのファイル構造について意見がありません 。

いくつかの有名な定型プロジェクトでは、コードをutils/フォルダー：

サンプルのフォルダー構造：

  • src /
    • components /
      • ...
    • レデューサー/
      • ...
    • utils /
      • ...
13
Tyler Long