1. ホーム
  2. javascript

[解決済み] reduxとステートマシン(例:xstate)の実際の違いは何ですか?

2022-05-09 01:25:25

質問

私は、中程度の複雑さのフロントエンド・アプリケーションの調査に取り組んでいます。現時点では、純粋なjavascriptで書かれており、このアプリケーションのいくつかの主要な部分を接続する多くの異なるイベントベースのメッセージを持っています。

私たちは、さらなるリファクタリングの範囲内で、このアプリケーションにある種の状態コンテナを実装する必要があると判断しました。以前、私はreduxとngrx store(実際には同じ原則に従います)の経験がありました。

リダックス は私たちのためのオプションですが、開発者の一人はステートマシンベースのライブラリ、特に xstateライブラリ .

私はxstateを使ったことがなかったので、面白いと思い、ドキュメントを読んだり、いろいろなサンプルを見たりし始めました。しかし、ある時点で、reduxとの間に大きな違いがないことを理解しました。

xstateとreduxを比較した答えやその他の情報を探すのに何時間も費やしました。しかし、以下のようないくつかの記事を除いて、明確な情報は見つかりませんでした。 reduxからステートマシンを作る。 または、reduxとxstateを使用することに焦点を当てたライブラリへのリンクです。 一緒に (かなり変ですが)。

もし誰かがその違いを説明したり、開発者がどのような場合にxstateを選択すべきかを教えてくれるなら、歓迎しますよ。

どのように解決するのですか?

私はXStateを作りましたが、どちらを使うべきかはチームによって異なるので、ここで説明することはできません。その代わり、いくつかの重要な違いを強調することにします。

<テーブル Redux XState は、基本的にステートコンテナであり、ここでイベント ( アクション はreducerに送られ、reducerは状態を更新します。 も状態コンテナであるが、有限の状態を分離する(例. "loading" , "success" ) から "無限状態"、またはコンテキスト (例, items: [...] ) は、リデューサーの定義方法を指示するものではありません。リデューサーは、現在の状態とイベント (アクション) が与えられたときに次の状態を返す、単なる関数です。 イベントによる有限状態間の合法的な遷移を定義し、遷移中(または状態への入口/出口)に実行されるべきアクションを定義することができます。 する ない には副作用を処理する方法が組み込まれています。redux-thunkやredux-sagaなど、多くのコミュニティのオプションがあります。 は、アクション(副作用)を宣言的かつ明示的にします。 State オブジェクトが返されます(現在の状態+イベント)。 有限状態と無限状態の区別がつかないため、現状では状態間の遷移を視覚化する方法はありません。 はビジュアライザーがあります。 https://statecharts.github.io/xstate-viz 宣言的であるため実現可能である リデューサで表現される暗黙のロジックや振る舞いは、宣言的に(例えばJSONで)シリアライズすることができない 論理/動作を表すマシン定義は、JSONにシリアライズし、JSONから読み取ることができます。 厳密にはステートマシンではない は、W3CのSCXML仕様に厳密に準拠しています。 https://www.w3.org/TR/scxml/ 不可能な状態を防ぐために、開発者が手動で行うことに依存します。 ステートチャートを使ってイベント処理の境界を自然に定義することで、不可能な状態を防ぎ、静的な分析も可能。 単一のグローバル・アトミック・ストアの使用を推奨 アクター・モデルのようなアプローチを推奨しています。

今週中に、もっと重要な違いをドキュメントに追加する予定です。