2017-06-27 10 views
2

これは私がまだ標準的な解決策を見つけていない1つのことです。Redux:コンポーネントからの成功またはエラーフローへのリクエスト(redux-sagaを使用)

私は副作用のためにredux-sagaを使用してストア設定を行い、コンポーネントから非同期の副作用を持つアクションをディスパッチし、副作用が処理されたらコンポーネントに何かを実行させたい別のルート/画面に移動し、モーダル/トーストなどをポップアップします)。

また、ローディングインジケータまたはエラー時にエラーを表示したいとします。私は、通常のフローを開始するアクションを派遣したいとすべての関連情報を持っているだろう、Reduxので

try { 
    this.setState({loading: true}); 
    const result = await doSomeRequest(); 
    this.setState({item: result, loading: false}); 
} catch (e) { 
    this.setState({loading: false, error: e}); 
} 

はReduxの前に、流れのこの種のは、それは次のようになりたい、まっすぐでした多くのコンポーネントが何が起こっているのかを聞くことができるようにすることです。

「要請済み」、「成功」、「失敗」の3つのアクションがあります。 私のコンポーネントでは、要求されたアクションをディスパッチします。 責任あるサガは、「要求された」処理時に「成功」​​または「失敗」アクションのいずれかをディスパッチします。

マイコンポーネントに変更が反映されます。 しかし、アクションが完了したかどうかを判断する標準的な方法は見つけていません。おそらくストアは非同期アクションの結果として更新されていない可能性があります(NO-OPですが、ロード状態でも推測できます)。しかしアクションはまだ成功し、別の画面にナビゲートするようなことをしたい。

私は本当にredux docs、redux-saga docsまたはStackoverflow/Googleではこの種の(一見一般的な)シナリオを見つけようとしましたが、成功しませんでした。

注:また、私はこの動作は、非同期アクションのディスパッチを行うことができ、成功アクションまたはcatchアクションでエラーアクションを受け取ることができるので、 m間違って、本当にサンクを使ったことはありません)。しかし、私はまだ同じような行動を達成することはできませんでした。

私は3つの具体的な解決策を作ってみた:

  1. 最も原始的な解決策は、唯一の「成功」/コンポーネントからアクション「失敗」を扱います。今この解決策私は大きなファンではありません。具体的な実装では、非同期要求が開始されたことを示すアクションはありません。副作用は、サガ内で抽象化されるのではなく、コンポーネントの中でそのまま処理されます。潜在的なコードの反復の多く。

  2. リクエストアクションをディスパッチする直前に1つのタイムサガを実行すると、 '成功'/'失敗'アクションが競合し、最初に発生したアクションに反応することができます。このため私はサガの実行を抽象化するヘルパーを書いています:https://github.com/milanju/redux-post-handling-example/blob/master/src/watchNext.js この例では、単純で宣言的なので、1よりもたくさんのことが好きです。このようにランタイム中にサガを作成することには否定的な結果があるのか​​、あるいは私がリベンックスサガでやっていることを達成するための別の「適切な」方法があるかどうかはわかりませんが?

  3. が店にアクションに関連するすべてのもの(ロード、successFlag、エラー)を置くと、行動の変化((!this.props.success & & nextProps.success))にcomponentWillReceivePropsで反応は、アクションが成功に完了したことを意味します)。 これは第2の例と似ていますが、あなたが選択した副作用処理ソリューションでも動作します。 おそらく、小道具が非常に速くて小道具がコンポーネントWillReceivePropsに入ると、そのコンポーネントが成功していないことから完全な成功に移行するのをスキップすると、動作していないことを検出したようなものを監視しているのでしょうか?私は私が使用した方法にいくつかの入力を大好きだhttps://github.com/milanju/redux-post-handling-example

    を:

その完全な例ソリューションが実現しました、私はこの質問のために作成したサンプルプロジェクトを見て気軽にしてください説明されたアクションフローを処理します。

  1. ここで何か誤解していますか?私が思いついた「解決策」はまったくまっすぐではありませんでした。たぶん私は間違った角度から問題を見ています。
  2. 上記の例に問題はありますか?
  3. この問題のベストプラクティスまたは標準ソリューションはありますか?
  4. 説明したフローをどのように処理しますか?

お読みいただきありがとうございます。

答えて

0

あなたの質問が正しく理解されていれば、あなたのサーガが発動した行動に基づいてコンポーネントが行動を起こさせたいと思っています。これは通常componentWillReceivePropsで発生します。そのメソッドは新しい小道具で呼び出されますが、古い小道具はまだthis.propsで利用できます。

次に、状態(要求/成功/失敗)を古い状態と比較し、それに応じてさまざまな遷移を処理します。

何かを誤解しているかどうか教えてください。

関連する問題