反応ルータが変更されたときにAPI応答をキャンセルできますか？

Question

私は追加と編集のために同じフォームと同じ状態をreduxで使用しています。編集用のデータを取得するためにAPIを呼び出すと、レスポンスが到着する前にフォームを追加するようにルータを変更します。すべてのフォームデータは、追加と編集の両方に同じ状態を使用しているため、項目を追加するために自動的に入力されます。これが起こらないようにする方法はありますか？

自分の行動の作成者：

fetchById: function (entity, id) { 
     return function (dispatch) { 
      dispatch(apiActions.apiRequest(entity)); 
      return (apiUtil.fetchById(entity, id).then(function (response) { 
        dispatch(apiActions.apiResponse(entity)); 
        dispatch(actions.selectItem(entity, response.body)); 
      } 
     } 
} 

は応答が遅く、その後のSelectItemが遅れて派遣されたよう。そして、アイテムを追加するためのフォームを開くと、このフォームはレスポンスのこのデータで埋められます。

Answer 1

サンクは、引数としてdispatchとgetStateの両方を取得します。

あなたがどこかの状態で現在のルートを維持する場合は、APIコールが開始されてから、それが変更された場合は、getState().routing.pathまたはこのような何か、とreturnと同じページにまだいるかどうかをAPIコールバックで確認することができます。

状態に現在のルートを残していない場合は、コンポーネント内でthis.context.routerを読むことができます（取得するにはcontextTypesを定義することを忘れないでください）。アクション作成者に渡します。アクション作成者はrouter.isActive()を使用して、要求の前後に同じパスにいるかどうかを確認できます。

最後に、ではなく、と同じ状態を使用してアイテムの編集や追加ができます。あなたの状態の形状は{ drafts: { newItem: ..., 1: ..., 2: ... } }のように見えることができますし、drafts.newItemで「追加」フォームを維持し、対応するエンティティのIDで任意の「編集」フォームを保つことができます。この方法では、お互いを上書きすることはなく、ボーナスとして進行中の編集を保存することができます。あなたが "Back"を押してからフォームに再度行くならば（もちろんあなたのUXでこれを望むかどうかによる）。

Answer 2

私は、これは他の日blog postと私は2番目の部分は、あなたが探しているものを説明だと思いました。あなたは必ずしも要求を取り消したいが応答を無視したくない。

基本的には、ユニークなIDを持つサーバーに非同期要求を追跡します外側の減速を作成したいです。要求IDがリストにある場合のみ、それをサブレデューサーに許可します。

ページを切り替えると、あなたがユニークなIDのリストをクリアしたいと思うでしょう。その後、

const initialState = []; 

function update(state = initialState, action) { 
    const { seqId } = action; 

    if (action.type === constants.UNLOAD) { 
    return initialState; 
    } 
    else if (seqId) { 
    let newState; 
    if (action.status === 'start') { 
     newState = [...state, seqId]; 
    } 
    else if (action.status === 'error' || action.status === 'done') { 
     newState = state.filter(id => id !== seqId); 
    } 

    return newState; 
    } 

    return state; 
} 

とサブ減速を制限：

let store = createStore((state, action) => { 
    if (action.seqId && 
     (action.status === 'done' || action.status === 'error') && 
     state && 
     state.asyncRequests.indexOf(action.seqId) === -1) { 
    return state; 
    } 
    return reducer(state, action); 
}); 

このためジェームズのうちビッグ叫び

は、ブログからまっすぐに持ち上げました。本当に素晴らしい解決策と彼のブログの記事で非常によく説明されています。