React中如何处理多页JSON响应的Redux Dispatch逻辑？

嘿，我来帮你搞定这个多页API的适配问题！结合你用Redux和Thunk的场景，我分两种常见需求给你提供解决方案：

方案一：一次性拉取所有分页数据 #

如果你的需求是把所有页的提醒数据一次性加载到Redux store里，可以用递归请求或者循环请求的方式，直到API返回的next字段为null。我用async/await来重构你的Action，这样代码可读性更高：

export const fetchAllReminders = () => async (dispatch) => {
  // 可选：发送加载开始的action，用于UI显示加载状态
  dispatch({ type: 'FETCH_REMINDERS_START' });

  let allResults = [];
  let nextUrl = `${serverroute}reminders/`;

  while (nextUrl) {
    try {
      const response = await fetch(nextUrl, {
        headers: {
          'Authorization': `Basic ${userCredential}`
        }
      });
      const data = await response.json();

      // 将当前页的结果合并到总数组
      allResults = [...allResults, ...data.results];
      // 更新下一页的URL
      nextUrl = data.next;
    } catch (error) {
      // 可选：处理请求错误，发送错误action
      dispatch({ type: 'FETCH_REMINDERS_ERROR', payload: error.message });
      // 出错后终止循环
      break;
    }
  }

  // 所有页请求完成后，发送最终的action到store
  dispatch({ type: FETCH_REMINDERS, payload: allResults });
  // 可选：发送加载完成的action
  dispatch({ type: 'FETCH_REMINDERS_SUCCESS' });
};

关键点说明： #

• 用while循环判断nextUrl是否存在，存在就继续请求下一页
• 每次请求把当前页的results合并到总数组里
• 添加了错误处理和加载状态的action（你可以根据自己的Redux reducer需求调整这些action类型）

方案二：按需加载下一页（比如点击“下一页”按钮） #

如果你的需求是分页加载（比如用户滚动到底部或者点击按钮才加载下一页），需要在Redux store里保存当前的next URL和已加载的结果，然后写一个专门加载下一页的Action：

第一步：调整Redux State结构 #

你的store里需要保存这些状态：

// 示例reducer的初始state
const initialState = {
  reminders: [],
  nextUrl: `${serverroute}reminders/`, // 初始的第一页URL
  isLoading: false,
  error: null
};

第二步：编写加载下一页的Action #

export const fetchNextReminders = () => async (dispatch, getState) => {
  // 获取当前store里的nextUrl
  const { nextUrl } = getState().reminders;

  // 如果没有下一页或者正在加载，直接返回
  if (!nextUrl || getState().reminders.isLoading) return;

  dispatch({ type: 'FETCH_NEXT_REMINDERS_START' });

  try {
    const response = await fetch(nextUrl, {
      headers: {
        'Authorization': `Basic ${userCredential}`
      }
    });
    const data = await response.json();

    // 发送action，将新页的结果追加到已有数据中，并更新nextUrl
    dispatch({
      type: 'FETCH_NEXT_REMINDERS_SUCCESS',
      payload: {
        newReminders: data.results,
        nextUrl: data.next
      }
    });
  } catch (error) {
    dispatch({ type: 'FETCH_NEXT_REMINDERS_ERROR', payload: error.message });
  }
};

第三步：对应的Reducer处理 #

const remindersReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_NEXT_REMINDERS_START':
      return { ...state, isLoading: true };
    case 'FETCH_NEXT_REMINDERS_SUCCESS':
      return {
        ...state,
        reminders: [...state.reminders, ...action.payload.newReminders],
        nextUrl: action.payload.nextUrl,
        isLoading: false,
        error: null
      };
    case 'FETCH_NEXT_REMINDERS_ERROR':
      return { ...state, isLoading: false, error: action.payload };
    // 其他action类型的处理...
    default:
      return state;
  }
};

关键点说明： #

• 用getState()获取当前store里的nextUrl，避免重复请求
• 每次加载下一页后，只将新数据追加到已有数据中，而不是替换
• 保存nextUrl到store里，方便后续判断是否还有更多数据可以加载

内容的提问来源于stack exchange，提问作者Debanjan Das