[解決済み] 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/
不可能な状態を防ぐために、開発者が手動で行うことに依存します。
ステートチャートを使ってイベント処理の境界を自然に定義することで、不可能な状態を防ぎ、静的な分析も可能。
単一のグローバル・アトミック・ストアの使用を推奨
アクター・モデルのようなアプローチを推奨しています。
今週中に、もっと重要な違いをドキュメントに追加する予定です。
関連
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み] substrとsubstringの違いは何ですか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] Reactのstateとpropsの違いとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
Vueのフォームイベントのデータバインディングの説明
-
Vueのフィルタの説明
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
jq は html ページとデータを動的に分割する。