分页——加载覆盖之前的状态

Question

我在应用程序中遇到有关分页的问题。用户有一个交易列表，所以我们决定在部分列表中创建一个缓慢的加载。但是，api 可以正常工作并获取数据。每次我获得新数据时，以前的状态都会被新状态覆盖。

这是我的减速器：

export default function(state = {}, { type, sequence, payload } = {}) {
  switch (type) {
    case TRANSACTIONS.FETCH: //used when fetching the first page
      return sequence === REQUEST.SUCCESS ? payload : state;

    case TRANSACTIONS.FETCH_MORE: { //fetching next pages
      return sequence === REQUEST.SUCCESS ? { ...state, ...payload } : state;
    }
  }
  return state;
}

交易数据如下所示：

transactions: {
data: {},
links:{},
meta:{}
}

payload Screenshot state Screenshot

Answer 1

您的情况比您预期的要复杂:( 。状态中的 data 对象是一个数组。当您推送有效负载状态时，您将完整的 data 对象替换为新的data 对象。你需要一个更好的 reducer 结构来应对这个场景：

export default function(state = {}, { type, sequence, payload } = {}) {
  switch (type) {
    case TRANSACTIONS.FETCH: //used when fetching the first page
      return sequence === REQUEST.SUCCESS ? payload : state;

    case TRANSACTIONS.FETCH_MORE: { //fetching next pages
      return sequence === REQUEST.SUCCESS ? {
        ...state,
        data: [...state.data, ...payload.data], // <--- concat the data arrays IMMUTABLE way.
        links: payload.links, // <--- it don`t know what you want here, replace or modify, please share more about this.
        meta: payload.meta // <--- here too.
      } : state;
    }
  }
  return state;
}

分页——加载覆盖之前的状态

Pagination - loading overrides the previous state

api

pagination

state

reducers

react-native