Flux Architecture

Flux は、大規模なWebアプリケーションの構築の課題に対処するためにFacebookが導入したデザインパターンです。もともとWebアプリケーションを念頭に置いて設計されていますが、Fluxアーキテクチャは、ターミナルアプリケーションを含む任意のクライアント側プロジェクトに適用できます。 ratatui: https://github.com/Yengas/rust-chat-server/tree/main/tuiを使用して Flux アーキテクチャを使用する実世界の例です。

なぜ `ratatui` の `Flux` ?

ターミナルアプリケーションは、多くの場合、複雑なユーザーインタラクション、複数のビュー、および動的なデータソースに対処する必要があります。アプリケーションを予測可能に保ち、ロジックが分離されていることが重要です。 Flux は、一方向のデータフローを使用すると、 ratatui 開発者がユーザーの入力を処理し、データを処理し、ビューを更新するための構造化された方法を持つことができます。

`Flux` `ratatui` 概要

ディスパッチャ

ディスパッチャーは、アプリケーション内のすべてのデータフローを管理する中央ハブのままです。アプリケーション内のすべてのアクションは、ユーザー入力であろうとサーバーからの応答であろうと、ディスパッチャーを介してチャネリングされます。これにより、データの処理方法が保証され、ディスパッチャーには独自のロジックがないため、登録されたすべてのコールバックがアクションデータを受信することを保証します。

struct Dispatcher {
    store: Store,
}

impl Dispatcher {
    fn dispatch(&mut self, action: Action) {
        self.store.update(action);
    }
}

店舗

Ratatuiの店舗は、アプリケーションの状態とその論理を保持しています。彼らは次のようなものを表すことができます:

メニュー内のアイテムのリスト。
テキストエディターまたは視聴者のコンテンツ。
ユーザーの構成または設定。

店舗は、ディスパッチャーから派遣されたアクションを聴きます。関連するアクションが発送されると、ストアはその状態を更新し、変更が発生したことをリスニングコンポーネント (またはビュー) に通知します。

struct Store {
    counter: i32,
}

impl Store {
    fn new() -> Self {
        Self { counter: 0 }
    }

    fn update(&mut self, action: Action) {
        match action {
            Action::Increment => self.counter += 1,
            Action::Decrement => self.counter -= 1,
        }
    }

    fn get_state(&self) -> i32 {
        self.counter
    }
}

アクション

アクションは、アプリケーションの変更またはイベントを表します。たとえば、ユーザーがキーを押したり、メニュー項目を選択したり、テキストを入力したりすると、アクションが作成されます。このアクションは、関連する店舗によって派遣および処理され、アプリケーション状態の潜在的な変更につながります。

enum Action {
    Increment,
    Decrement,
}

ビュー /ウィジェット

ratatui のウィジェットは、アプリケーションのUIを表示します。彼らはアプリケーションの状態を保持または管理しませんが、それを表示します。ユーザーがウィジェットと対話すると、派遣されるアクションを作成できます。これにより、ストアの変更が発生する可能性があり、ウィジェットが更新される可能性があります。