Redux状态更新问题：无法将旧帖子追加到groupPosts状态

当前实现逻辑：

• 从数据库查询最新10条帖子（含id、postTitle、dateCreated等字段），调用reducer更新groupPosts状态
• 另一个查询获取更早的10条帖子，调用reducer更新存储旧帖子的groupPostsMore状态
• groupPostsMoreButton用于标记是否还有更多帖子可加载，这部分功能正常

渲染groupPosts的代码：

groupPosts.map((item, index) => (
  <PostCard                        
    key={index}
    item={item}                       
  />
))

获取状态的代码：

const groupPosts = useSelector(state => state.groups.groupPosts);
const morePostsButton = useSelector(state => state.groups.groupPostsMoreButton);
const groupPostsMore = useSelector(state => state.groups.groupPostsMore);

问题：尝试用groupsPosts: state.groupPosts.concat(action.groupPostsMore)将旧帖子追加到groupPosts中，但前端状态未更新。

以下是reducer代码：

import { GET_GROUP_POSTS, GET_GROUP_POSTS_MORE, GET_GROUP_POSTS_MORE_BUTTON } from "../constants";

const initialState = {
    
    groupPosts: [],
    groupPostsMore: [],
    groupPostsMoreButton: null,
    loaded: false
}

export const groups = (state = initialState, action) => {

    switch (action.type) {        
        case GET_GROUP_POSTS:
            return { 
                ...state, 
                groupPosts: action.groupPosts,
                loaded: action.loaded
            }
        case GET_GROUP_POSTS_MORE_BUTTON:
            return {
                ...state,
                groupPostsMoreButton: action.groupPostsMoreButton,
                loaded: action.loaded
            }
        case GET_GROUP_POSTS_MORE:
            return { 
                ...state,  
                groupPostsMore: action.groupPostsMore,                  
                groupsPosts: state.groupPosts.concat(action.groupPostsMore),                                  
                loaded: action.loaded
            }
        default:
            return state
    }

}

核心问题是拼写错误：在GET_GROUP_POSTS_MORE的case中，你写的是groupsPosts（多了一个s），但初始状态里的目标字段是groupPosts（单数s），导致更新的是一个不存在的新字段，而非原有的groupPosts。

修改reducer对应代码即可：

case GET_GROUP_POSTS_MORE:
    return { 
        ...state,  
        groupPostsMore: action.groupPostsMore,                  
        groupPosts: state.groupPosts.concat(action.groupPostsMore), // 修正字段名拼写                                  
        loaded: action.loaded
    }

额外优化建议：

• 渲染列表时，优先使用item.id作为key值，而非index，避免列表更新时出现渲染异常
• 传统Redux中，除了concat，也可以用扩展运算符实现数组拼接：groupPosts: [...state.groupPosts, ...action.groupPostsMore]，写法更直观

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