动作必须是普通对象。反应还原错误

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

数据的 return 数据的 useEffect

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

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

Answer 1

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

您是否在该文件中将 PROJECT_LIST_REQUEST / PROJECT_LIST_SUCCESS / PROJECT_LIST_FAIL 另存为 variable/constant？

通常您会使用字符串进行调度，因此将其更改为 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,
});

动作必须是普通对象。反应还原错误

Actions must be plain objects. React-redux error

reactjs

redux-thunk

react-redux