問題タブ [xstate]

以下を必要とする次の React.js コンポーネントがあります。

• fetch を使用してサーバー側 API を呼び出してボタンをクリックしたときの状態を保持します。
• コンポーネントが初期化されると、useEffectfetch を使用してサーバー側 API を呼び出し、オブジェクトの現在の状態を取得する呼び出し後にコンポーネントに状態が設定されます。

コンポーネントの表示はこちら

これが私がこれまでに持っているものです。

現在の状態管理スタック: React、RTK/Redux、および Redux-Saga

これがハイレベルな問題です。私たちには複雑なフローがあり、これに必要な統合テストを作成できる QA エンジニアリング リソースがありません。これにより、次の問題が発生します。

• このフローで何かを変更するには、多くのコンテキストが必要でした (バグを導入することなく)
• フロー内のさまざまなパスを手動でテストして、何も壊れていないことを確認する必要がある
• 効率の大幅な欠如
• 熱心な QA の取り組みを行っても、バグは依然として多くのパスが存在するため、本番環境にすり抜けます。

私は xstate を見てきましたが、ステートチャートを生成する機能が本当に気に入っています (必要なコンテキストが少なく、非技術的な利害関係者の理解であり、今後の効率が向上するようです)。状態管理のために、現在、プラットフォーム全体で Redux を使用しています (これを変更することは非常に範囲外です)。これは私の質問に私を導きます：

• Redux をステートチャートと統合できる (十分にサポートされている) npm パッケージを知っている人はいますか?
• そうでない場合、xstate と Redux の両方を実装することの長所と短所は何ですか? Xstate はこのフロー専用であり、Redux から一部のデータをプルする必要があります。Redux の状態は xstate で使用できますが、Redux が xstate に依存するように記述する必要はないと思います。

私は xstate に精通しているわけではありませんが、これが時間の無駄やひどい考えになってしまうのであれば、あまり深く掘り下げたくありません。

また、コンテキストについては、これは非常に大きなレポであり、ソリューションは保守可能で読みやすく、最も重要なことにスケーラブルである必要があります

また 2 - これの主な目標は、自動生成されたステートチャートです。このフローには多くの人員が関与しており、ドキュメントを手動で最新の状態に保つことは現実的ではありません

反応コンポーネント（state.value）の関数内からマシンの状態を確認しようとしていますが、現在の状態を変更することはなく、常に初期状態を出力しますが、コンポーネントに onClick イベントを配置してコンソールを呼び出すと. log(state.value)、それは機能します...私は何か間違ったことをしていますか?