リアクションのフラックスでAjaxコールを作成する場所

Question

私はユーザーがユーザーを作成してからバックエンドにhttp投稿を作成できるreact jsアプリケーションを持っています。

私がアクションを呼び出し私の店で、この

export function createUser(name, username, password) { 
    dispatcher.dispatch({ 
    type: "CREATE_USER", 
    name, 
    username, 
    password, 
    }); 
} 

のように見える行動を持っており、それがこの

handleActions(action) { 
    switch(action.type) { 
    case "CREATE_USER": { 
    this.createUser(action.name, action.username, action.password); 
     break; 
    } 
     default: 
    } 
    } 

のように見えるバックエンドへのHTTPポストを作る機能をトリガ私は店内で、あるいはそれ自身の行動で、アヤックスコールを行うべきですか？

Answer 1

私はapiと呼ばれる別個のフォルダが必要だと思います。そこに私達はすべてのapi呼び出しを持っています。これらのファイルを挿入して、それらの関数を呼び出すことができます。ここでは、関数を呼び出してapiを呼び出し、アクションに応答します。

Answer 2

まずはredux-thunkが必要です。これは、他のアクションを非同期でディスパッチするアクションを作成する機会を与えます。

これ以降、サーバーへの呼び出しを行うアクションを作成し、新しいデータを格納する新しいアクションをディスパッチすることができます。例：あなたがここに見るように

getData(param) { 
    return (dispatch) => { 
    dispatch(dataRequestAction()); 

    return fetch(`/data/${param}`) 
     .then(r => r.json()) 
     .then(data => dispatch(setDataAction(data))) 
     .catch(err => dispatch(errroDuringRataRetrieving(err))) 
    }; 
} 

あなたが実際に店舗を変更するが、開始要求データを格納するために入れトリガー「dataRequestAction」しないワンアクション（のgetData）を持っています。次に、要求が完了した場合、アクションの1つがトリガーされます。

• setDataAction -

• errroDuringRataRetrieving - 要求が失敗した場合。

このようにして、redux経由でajaxを処理できます。