如何将异步值的返回分配给减速器的初始状态？

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对空数组执行 a操作，这不会出错。