Redux-thunk非同期呼び出しとステータス

Question

私はRedux-thunk非同期操作のパターンをReactまたはReact-Nativeで正しく理解しているかどうか、また操作の状態についてユーザーからのフィードバックをどのように受け取ることができるのか疑問に思っています。

私はパターンを理解していないか、パズルの他の部分があると感じています。

私のReact-nativeアプリケーション（ただし、Reactの場合もあります）では、更新REST呼び出しを呼び出して、約束を返します。 成功したか失敗した場合は、それに応じてメッセージを表示する必要があります。

Redux-asyncがなければ、残りの部分を呼び出して約束を処理するだけです。 Reduxのトレーニングで

callServiceUpdate(data).then(() => displaySuccessMessage()) 
.catch(() => displayErrorMessage()); 

我々は非同期操作を行うとき、私たちは行動を派遣し、アクションが非同期操作の呼び出しを行います。

// in file databaseActions.js 

export function updateStatusAction(isSuccess, errorMessage) { 
return { 
    type: 'UPDATE_STATUS', 
    isSuccess, 
    errorMessage }; 
} 

export function UpdateAction(data) { 
    return (dispatch) => { 
    callServiceUpdate(data) 
     .then(() => dispatch(updateStatusAction(true))) 
     .catch((error) => dispatch(updateStatusAction(false, error))); 
}}; 

とアクションがサービスを呼び出しますディスパッチ：私たちはアクションを定義するアクションファイルで非常に

、。

と入力してから、reduxStateActionを送出します。これによりredux状態が更新され、コンポーネントがpropsを通じて更新されます。

しかし、どのように成功の結果をユーザーに戻すには？ これは小道具を通し、コンポーネントのWillReceivePropsを処理していますか？

それほど複雑ではありませんか？ または、ユーザーにフィードバックを提供する簡単な方法はありますか？

Answer 1

私はこのテーマについていくつかの研究を行い、人々がこれをどのように解決しているかを調査しました。

Ajaxを扱うときの通常のパターンは、私が質問したとおりです。 しかし、ajax呼び出しステータスのユーザーへのフィードバックは、ルートコンポーネントコンテナにあるUI、またはajax呼び出しを行うすべての子コンポーネントを含む親コンポーネントコンテナ内の1つの場所でのみ発生します。

あなたが良いリアクトUIデザイングッドプラクティスに合わせてUIを設計する方法についての詳細を読むために必要がある場合は、アヤックスがで呼び出すの取り扱いでは約representational components and container components

いつものパターンを読んでは、次のように+ Reduxのはリアクト：

1. クエリまたはAjaxコールが開始されたことを示すアクションを送信します。

2. Ajaxコールを開始するアクションを送信します。

3. Ajaxから結果を受け取ったら、SUCCESSまたはFAILUREのアクションを送信してください。

これらはレデューサー側の

{ type: 'FETCH_POSTS_REQUEST' } 
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' } 
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } } 

ような行動の一例であり、あなたは の三つの部分を必要とする多忙を表示する（Ajaxリクエストを示すために、ステータスの一部が稼働している必要がありインジケータ）

店の意志で国家がこの

frontend: { 
     isFetching: true, 
     didInvalidate: false, 
     items: [] 
    }, 

に似たものになります10

そしてルートコンテナでisFetchingを処理してビジーインジケータをレンダリングします。

し、結果を表示し、または私はそれを行う方法を知ってエラー

Answer 2

あなたの成功の結果に応じて新しい状態を出力する減速器によって消費される、あなたの望む成功結果を含むアクションをディスパッチする必要があります。

function todoApp(state, action) { 
if (typeof state === 'UPDATE_STATUS') { 
return { ...state, action.payload } // You can access this by connecting your components to the global redux store. 
} 
return state 
} 

Answer 3

FYIあなたはupdateActionでcallServiceUpdate()を返す必要はありません。あなたの意見や感想を教えてください：自分のレビューを作成する>カスタマーレビューを見るクチコミ商品やカテゴリー、トピックについて他のカスタマーと語り合う場です。お買いものに役立つ情報交換ができます。

望ましくない再レンダリングを避けるために、コンポーネントをshouldComponentUpdateに更新するシナリオを指定することもできます。私はこれが複雑すぎるアプローチだとは言いません。