Как назначить возврат значения async в исходное состояние редуктора?

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 возвращает обещание. Так что в вашем client/actions/loadMore.js вам нужно сделать:

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

Кроме того, как упоминалось patric, следующий код в client/reducers/loadMore.js является асинхронной,

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

initState.list здесь Обещание. Вместо этого инициализируйте его пустым списком и отправьте действие loadMore() в методе ComponentDidMount вашего компонента/контейнера