42

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」になります)。そのため、比較的複雑なロジックがいくつかあります。コンポーネントに反応します。

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

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

4

2 に答える 2

35

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

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

機能が必要なモジュールをインポートするだけで、グローバル関数は必要ありません。

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

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

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

于 2016-11-29T16:32:23.593 に答える
26

まず第一に、Redux はアプリケーションのファイル構造について何の意見も持っていません。

いくつかの有名なボイラープレート プロジェクトでは、コードをutils/フォルダーに入れます。

フォルダ構造の例:

  • ソース/
    • コンポーネント/
      • ...
    • 減速機/
      • ...
    • ユーティリティ/
      • ...
于 2017-06-25T02:31:54.100 に答える