动作必须是普通对象。反应减少错误

Question

因此，我不知道为什么会遇到此错误，我已经查看了所有表格并尝试构建我的操作以表示正确的结构，但我仍然遇到此错误。有人可以帮我调试一下吗？

这里是动作：

export const listProjects =
  (pageNumber = "") =>
  async (dispatch) => {
    try {
      // Dispatch request type
      dispatch(PROJECT_LIST_REQUEST);
      // axios call
      const { data } = await axios({
        method: "GET",
        url: `/api/projects?page=${pageNumber}`,
      });
      // on success dispatch request success
      dispatch({
        type: PROJECT_LIST_SUCCESS,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: PROJECT_LIST_FAIL,
        payload:
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message,
      });
    }
  };

这里是store

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

// import reducers
import { userLoginReducer } from "./reducers/userReducer";
import { projectListReducer } from "./reducers/projectsReducer";

const middleware = [thunk];

const reducer = combineReducers({
  userLogin: userLoginReducer,
  getProjects: projectListReducer,
});

const userInfoFromStorage = localStorage.getItem("userInfo")
  ? JSON.parse(localStorage.getItem("userInfo"))
  : null;

const initialState = {
  userLogin: { userInfo: userInfoFromStorage },
};
const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

这里是调用动作以从 API 返回数据的 useEffect

useEffect(() => {
    dispatch(listProjects(page));
  }, [dispatch, page]);

我有一个较早的项目，其中代码的结构相似，但是，我只是不明白我做错了什么。

Answer 1

看起来在您的 listProjects 函数中，您正在调度一个变量而不是一个动作 (dispatch(PROJECT_LIST_REQUEST);)，而在其他函数中，您正在调度一个动作对象，但类型是变量/常量。

您是否将PROJECT_LIST_REQUEST / PROJECT_LIST_SUCCESS / PROJECT_LIST_FAIL 保存为该文件中的变量/常量？

通常您会使用字符串进行调度，因此将其更改为 dispatch({type: 'PROJECT_LIST_REQUEST'}) 应该可以解决错误，尽管您可能还需要将其他字符串转换为字符串：

dispatch({type: 'PROJECT_LIST_REQUEST'})
...
dispatch({
    type: 'PROJECT_LIST_SUCCESS',
    payload: data,
}); 
...
dispatch({
    type: 'PROJECT_LIST_FAIL',
    payload:
        error.response && error.response.data.message
        ? error.response.data.message
        : error.message,
});