reduxサンクがアクションをディスパッチするのを待つ方法

Question

reducexサンクはアクションクリエータによって非同期に返された関数を呼び出すので、リムックスが実際にアクションをディスパッチしてから移動する前に、

サーバーへの各POST要求の前にCSRFトークンを取得する必要があり、両方の手順に対応するアクションがあります。

問題は、私がこれらのアクションクリエータを連続して呼び出すと、何らかの理由でPOSTアクションが送出されてから、CSRFアクションが送出されることです。私はこれらの懸念を分けておきたいので、私はその行動を組み合わせることは望ましくない。

どのようにアクションクリエイターの呼び出しコードとredux thunkがそれらのアクションをディスパッチして同期することができますか？

Answer 1

サンクアクションクリエイターをPromiseとして作成し、非同期ジョブをより簡単に制御できます。

export function createXHRAction(xhrType, dispatch, options) { 
    // you can customize createXHRAction here with options parameter. 

    dispatch({ type: xhrType, data: { fetching: true, data: [] }); 

    return new Promise((resolve, reject) => { 
     fetch(options.url, { ... }) 
     .then((response) => { 
      // to getting server response, you must use .json() method and this is promise object 
      let parseJSONPromise = response.json(); 

      if(response.status >= 200 && response.status < 300) { 
       parseJSONPromise.then((result) => { 
        dispatch({ type: xhrType, data: { fetching: false, data: result.data }); 
        resolve(result.data); 
       }); 
       return parseJSONPromise; // make possible to use then where calling this 
      } 
      else { 
       return parseJSONPromise.then(res => { 
        reject({ message: res.error.message }); 
       }); 
      } 
     }) 
     .catch((error) => { 
      // handles common XHR error here 
     }); 
    }); 
} 

今、あなたは簡単にこのような新しいXHRアクションを作成できます。

import { createXHRAction } from './actions'; 

export function getUser(id) { 
    return (dispatch) => { 
     return createXHRAction('user', dispatch, { 
      method: 'get', 
      url: `/user/${id}` 
     }); 
    }; 
} 

今は同期のようなサンクアクションを使用することができます。

import { dispatch } from './store'; 
import { getUser } from './action/user'; 

class SomeComponent extends React.Component { 
    ... 
    loadData(id) { 

     // from here, store's state should be { fetching: true, data: [] } 
     dispatch(getUser(id)) 
     .then((userData) => { 
      // now from here, you can get the value from parameter or you can get it from store or component props if super component passing it by redux provider. 
      // store state should be { fetching: false: data [..., ...] } 
      // do something with received data 
     }) 
     .catch((error) => { 
     })); 

    } 
} 

Answer 2

あなたはCSRFトークン要求を待つ必要がPOST要求を開始する前に終了します。

私はアクションの作成者

function postAction(data) { 
    fetchToken().then((token) => { 
     //you have got token here and can use it for the POST-request. 
     doPost(data, token).then(() => { 
      //dispatch success action if you need so 
     }) 
    }) 
}