還元剤の初期状態に非同期値の戻り値を割り当てる方法はありますか？

Question

フルコード：https://github.com/kenpeter/test_infinite_scroll_1

私は還元剤を持っています。それはlistと呼ばれる支柱を持っています。 createList([], 0)はリモートAPIを呼び出してデータを取得した後、listに割り当てます。

./reducers/loadMore.js

import { MORE_LIST } from "../actions/types"; 
import { createList } from "../utils/func"; 

const initState = { 
    list: createList([], 0) // <-------------------- 
}; 

// able to fire 
export default function list(state = initState, action = {}) { 
    switch(action.type) { 

    case MORE_LIST: 
     return { 
     list: action.list, 
     } 

    default: 
     return state; 
    } 
} 

./utils/func.js

import _ from 'lodash'; 
import axios from "axios"; 

// clone the array 
export function createList(arr=[],start=0) { 
    let apiUrl = "http://www.mangaeden.com/api/list/0?p=0"; 

    return axios.get(apiUrl).then((obj) => { 
    let arr = obj.data.manga; // array of obj 

    //console.log("--- start ---"); 
    //console.log(arr); 

    return arr;   
    }); 
} 

私はfunction createList(arr=[],start=0)を持っている問題は、 arrは、リモートAPIからデータを持っているが、それはありますlistに戻る./reducers/loadMore.js

Answer 1

あなたのリデューサの初期状態でajaxリクエストを作成することがアンチパターンです。

代わりに、私は空の配列として最初の状態を持ち、アプリケーションが起動するか、適切なコンポーネントのライフサイクル（例えばcomponentWillMount）でデータをフェッチするアクションをディスパッチします。

ローディングバー/スピナーなどの指標を使用して、データが戻ってきたことをユーザーに示すことができます。さらに、配列の長さをチェックするか、空の配列の.mapを実行してもエラーは発生しません。

Answer 2

あなたのcreateListはPromiseを返します。だからあなたのclient/actions/loadMore.jsあなたがする必要があるに：

const initState = { 
    list: createList([], 0) 
}; 

、

また

return createList(list, list.length+1).then((tmpList) => { 
    dispatch({ 
     type: MORE_LIST, 
     list: tmpList 
    }); 
}); 

、patricが述べたように、client/reducers/loadMore.jsに次のコードは、非同期であるここinitState.listは約束です。代わりに空のリストで初期化し、コンポーネント/コンテナのComponentDidMountメソッドでloadMore（）アクションをディスパッチしてください。