3

FacebookのFluxについて頭を悩ませようとしています...

ヘッダーのボタンを使用して非表示および表示できるサイド メニューを備えたアプリがあるとします。

ヘッダーは 1 つのコンポーネントで、サイド メニューは別のコンポーネントです。

現在、ヘッダー コンポーネントは、HTML div サイド メニュー要素にクラスを設定するだけで、CSS によってアニメーション化されて非表示になります。

ここでの一般的な考え方は何ですか？

4

2 に答える 2

2

ReactJs は、データを取得する方法 (データがどのように渡されるか、またはそのデータが Web アプリケーション全体でどのように処理される必要があるか) についてはあまり気にしません。そこで登場するのが Flux で、データの処理方法に関する機能的なアプローチを作成します。データフローは基本的に次のとおりです。

Action -> Data Store -> Component

データの変更は、アクションを呼び出すことで発生します。データ ストア自体がアクションをリッスンし、ストア内のデータを変更する必要があります。これにより、データ構造とロジックがフラットに保たれます。

あなたの場合、データフローはおそらく次のようになります。

ヘッダー --> ユーザー クリック --> アクションの起動 --> ストアの更新 --> サイド メニューがそのストアの変更をリッスンして応答します。

あなたのケースは、おそらく本当に Flux を必要としない単純な例です。ビュー ステート ロジックを維持する親コンポーネントがあり、2 つの子コンポーネント (サイド メニューとヘッダー) に props/callbacks を使用する方が簡単だと思います。しかし、ajax 呼び出しを行い、セッションを維持する必要があるより高度な例では、Flux が役立ちます。ログインコンポーネントがあり、ユーザーに応じて異なるサイドメニューオプションとヘッダーオプションを表示したい場合のように:

Login Component --> User Logins --> Calls Action #signIn --> Showing Loading State
                                                         --> Dispatcher handles action (make api call to authenticate user and load user data)

On success (for the api call), alert sessionStore, and populate store with data
On error, maybe fire another action that says login failed or something

SessionStore ---> Header Component (Listens to Store) --> Update view based on store information
             ---> Side Menu Component (Listens to Store) --> Update
于 2014-12-02T00:59:01.453 に答える
0

より一般的に言えば：

フラックスは、単方向データフローのソフトウェア アーキテクチャです。チェーンは Action -> Delegation -> Store -> View です... アクション (ボタンクリックなど) は、アプリケーションロジックとデータが保持されるストアに委任されます... ここで、アクションとデータが変更され、処理されます。ストアは最終的に、コールバックで以前に登録されたビュー (たとえば、反応コンポーネント) のイベントを発行します。このコールバックでは、ストアからデータを取得できます。ストアには読み取り専用でのみアクセスできることに注意してください。

したがって、あなたの場合...コンポーネントAがコンポーネントBに影響を与えるようにする場合は、コンポーネントBをストアのeventEmitterに登録し、ストアから目的のデータをGETする必要があります。コンポーネント a がストアに委譲されるアクションをトリガーすると、関数が実行され、最終的にコンポーネント B のコールバックを開始するイベントがスローされます。

これが十分に明確になったことを願っています...いくつかの素敵な絵でよりクールになります。

于 2014-12-01T23:26:48.413 に答える