Why is the Redux state not updating with the API data?

Question

I've been following the process for making an API call and storing it in global state with Redux using this project that I got from a Medium article. So far everything seems to work alright, no errors, but when I go to retrieve the global state there is nothing there. It doesn't seem to have been updated by the action that makes the API call. The relevant bits of code are as follows:

in reducers.js:

const initialState = {
    mods: [],
    pagination: { pageSize: 15, numPages: 1 },
    sortFilter: "mostPopular",
};

const globalState = (state = initialState, action) => {
    switch (action.type) {
        case SET_MOD_LIST:
            return { ...state, mods: state.mods };

        case SET_MOD_DETAILS:
            return { ...state };

        default:
            return state;
    }
};

const rootReducer = combineReducers({
  globalState,
});

export default rootReducer;

in actions.js:

export const fetchModList = (pagination, sortFilter = "mostPopular") => {
    const { pageSize = 15, numPages = 1 } = pagination ?? {};

    return async (dispatch) => {
        const response = await fetch(
            `https://www.myapi.com/mods?page=${numPages}&pageSize=${pageSize}&sortBy=${sortFilter}`
        );

        const resData = await response.json();
        
        dispatch({ type: SET_MOD_LIST, mods: resData });
    };
};

in index.js (Next.js root page):

const mods = useSelector((state) => state);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchModList({pageSize:2}));
    }, [dispatch]);

    console.log({mods})

This is 100% a result of Redux ignorance, this is my first project using it which I'm doing for an interview. Any help would be much appreciated!

Answer 1

Looks like you're setting mods to its own value mods: state.mods. Did you mean to set a value from action.payload rather than state.mods?