So I have no clue as to why I am encountering this error, ive been all over the forms and ive tried structuring my actions to represent the correct structure but i am still running into this error. can someone help me debug this?
here is the action:
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,
});
}
};
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Here is the 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;
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
And here is the useEffect that calls the action to return data from the API
useEffect(() => {
dispatch(listProjects(page));
}, [dispatch, page]);
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
I have an earlier project, where the code is structured similar, but, i just dont understand what im doing wrong.
CodePudding user response:
It looks like in your listProjects
function you're dispatching a variable rather than an action (dispatch(PROJECT_LIST_REQUEST);
), whereas in the others you are dispatching an action object, but with a variable/constant as the type.
Do you have PROJECT_LIST_REQUEST / PROJECT_LIST_SUCCESS / PROJECT_LIST_FAIL
saved as a variable/constant in that file?
Usually you'd dispatch using a string, so changing it to dispatch({type: 'PROJECT_LIST_REQUEST'})
should solve the error, although you may need to conver the others to strings as well:
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,
});