为什么 Redux 状态不更新 API 数据？

Question

我一直在关注使用 this project that I got from a Medium article 进行 API 调用并将其存储在 Redux 的全局状态中的过程。到目前为止，一切似乎都正常，没有错误，但是当我去检索全局状态时，那里什么也没有。它似乎没有被调用 API 的操作更新。相关代码如下：

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

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

在 index.js（Next.js 根页面）：

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

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

    console.log({mods})

这是 100% 对 Redux 无知的结果，这是我使用它的第一个项目，我正在接受采访。任何帮助将不胜感激！

Answer 1

您似乎正在将 mods 设置为它自己的值 mods: state.mods。您是要设置 action.payload 中的值而不是 state.mods 中的值吗？

为什么 Redux 状态不更新 API 数据？

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

redux

react-redux

next.js