Действия должны быть простыми объектами. Ошибка React-redux

#reactjs #react-redux #redux-thunk

Вопрос:

Поэтому я понятия не имею, почему я сталкиваюсь с этой ошибкой, я просматривал все формы и пытался структурировать свои действия, чтобы представить правильную структуру, но я все еще сталкиваюсь с этой ошибкой. кто-нибудь может помочь мне отладить это?

вот это действие:

 export const listProjects =  (pageNumber = "") =gt;  async (dispatch) =gt; {  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 amp;amp; 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(() =gt; {  dispatch(listProjects(page));  }, [dispatch, page]); 

У меня есть более ранний проект, где код структурирован аналогично, но я просто не понимаю, что я делаю не так.

Ответ №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 amp;amp; error.response.data.message  ? error.response.data.message  : error.message, });  

Комментарии:

1. да! на самом деле я как раз собирался прокомментировать, что я понял это, ха-ха. я просматривал весь свой код и форумы, пытаясь найти, где я ошибаюсь, но я думал, что это связано с асинхронной частью функции, а не с самой отправкой. Спасибо за ответ, я отмечу ваш как правильный ответ!