React reduxでajaxコールを使用してデータセットをロードするにはどうすればよいですか？

Question

JSONを返すバックエンドAPIへの非同期呼び出しで初期データを読み込もうとすると、問題が発生します。今、私はさまざまな記事を読み込もうとしていますが、非同期に読み込む方法はわかりません。それはデータの初期セットなので、同期して読み込む必要がありますか？はいの場合は、APIへの同期呼び出しをどのように達成できますか？そうでない場合は、この問題を非同期的に解決するにはどうすればよいですか？

現時点では、store.jsにデフォルトの状態を作成する、静的なjsonデータdata/articles.jsがあります。

おかげ

Answer 1

あなたは、あなたの最初のデータをダウンロードするための非同期アクションと（例えば）fetchライブラリーを派遣することを可能にするredux-thunkミドルウェアを、使用する必要があります。

ので： 1）たとえば、あなたのデータをフェッチするアクションを作成：receiveYourDataはあなたの状態、例では、あなたのデータを配置するアクションです

export function fetchData() { 
    const options = { 
    method: 'GET', 
    headers: { 
     'Authorization': 'Client-ID xx' // if theres any needed 
    } 
    } 

    return (dispatch) => { 
    return fetch('yourUrl.json', options) 
     .then(response => response.json()) 
     .then(data => dispatch(receiveYourData(data))) 
     .catch(err => console.log(err)); 
} 
} 

：

export function receiveYourData (payload = []) { 
    return { 
    type: RECEIVE_DATA, 
    payload: payload 
    } 
} 

もちろん、アクションハンドラを記述する必要があります。アクションハンドラは、アクションをディスパッチした後、データを自分の状態にします。

上記のような設定をしている場合は、fetchDataをcomponentDidMountライフサイクルメソッド（もちろんオプションの1つ）にディスパッチする必要があります。

特定のパーツを行う方法がわからない場合は、Exampleを参照してください。

またofficial async例が役に立つかもしれ:)

Answer 2

私もこの問題を抱えていました。この単純な作業のために多くのコードを追加する必要があることが判明しました。そこで私はこのプロセスを単純化して、redux - redux-async-initial-stateの初期状態の非同期ロードのためのパッケージを作成しました。

あなたは例をチェックアウトすることができ、あなたの場合には、最終的に自分の店の作成者は、次のようになります。アプリの起動時にロードするデータに代わり

// Load initial state function 
const loadStore =() => { 
    return Promise(resolve => { 
    fetch('/data/articles.js') 
     .then(response => response.json()) 
     .then(resolve); 
    }); 
} 

const storeCreator = applyMiddleware(asyncInitialState.middleware(loadStore)); 
const store = storeCreator(reducer);