#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. да! на самом деле я как раз собирался прокомментировать, что я понял это, ха-ха. я просматривал весь свой код и форумы, пытаясь найти, где я ошибаюсь, но я думал, что это связано с асинхронной частью функции, а не с самой отправкой. Спасибо за ответ, я отмечу ваш как правильный ответ!