Redux实现点击加载更多按钮不丢失原有数据问题排查

问题根因 #

代码的核心问题出在reducer的FETCH_ALL_POSTS_REQUEST分支逻辑：每次发起新的分页请求时，都会把现有posts数组重置为空，所以后续即使SUCCESS分支用了concat合并，也只是空数组拼接新页数据，自然看不到之前加载的内容。

修复方案 #

1. 修正Reducer逻辑 #

只需要修改请求发起时的状态处理，保留原有posts数据即可，修改后的reducer代码如下：

export const postsReducer = (state = { posts: [] }, action) => {
  switch (action.type) {
    case PC.FETCH_ALL_POSTS_REQUEST:
      // 保留原有所有状态，仅更新loading字段
      return { ...state, loading: true };
    case PC.FETCH_ALL_POSTS_SUCCESS:
      return {
        ...state,
        loading: false,
        posts: state.posts.concat(action.payload),
      };
    case PC.FETCH_ALL_POSTS_FAIL:
      return { ...state, loading: false, error: action.payload };
    // 补充default分支返回原state，避免Redux告警
    default:
      return state;
  }
};

2. 可选优化 #

可以给加载更多按钮增加禁用状态，避免加载过程中用户重复点击发起无效请求，组件代码修改参考：

<Button onClick={() => setPage(page + 1)} disabled={loading}>
  {loading ? '加载中...' : '加载更多'}
</Button>

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