Trying to update redux state state with new data from database-CodePudding

I have a query that gets the first 10 recent posts from the database (id, postTitle, dateCreated etc) and calls a reducer to update a groupsPosts state I have another query that gets the older 10 posts and calls a reducer to update a groupsPostsMore state which store the retrieved older 10 posts The groupPostsMoreButton more simply stores a true or false if they're are most posts to load. All of these work just fine.

I'm outputting the groupPosts with a map function

 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);

My problem is that I'm not able to a add the old 10 posts to the current groupPosts state. I've tried to concat to the groupPosts groupsPosts: state.groupPosts.concat(action.groupPostsMore), but it isn't updating on the state on the front end.

Here are my reducers

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
    }

}

CodePudding user response：

You could try @reduxjs/toolkit. It has a much cleaner syntax for Redux code. It looks like your code is not working because of this typo: groupsPosts. It should be groupPosts , right?

CodePudding user response：

Hey if the below doesnt help,

groupsPosts: [...state.groupPosts,...action.groupPostsMore]

Then you need to surely check for action.groupPostsMore , what is being logged there.

Hope it helps. feel free for doubts