Actions must be plain objects. React-redux error

November 27, 2021

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,
      });
    }
  };

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;

And here is the useEffect that calls the action to return data from the API

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

I have an earlier project, where the code is structured similar, but, i just dont understand what im doing wrong.

>Solution :

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,
});