Action must be plain object. Use custom middleware

Question

What would be the problem?

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

Configure Store:

export default configureStore = () => {
  let store = compose(applyMiddleware(ReduxThunk))(createStore)(reducers);
  return store;
}

Action

export const menulist = async ({ navigation  }) => {
  return async dispatch => {
    try {
        dispatch({ type: types.MENULIST_REQUEST_START })
        let response = await menuListByCategories();
        dispatch({ type: types.MENULIST_SUCCESS })
    } catch (error) {
        dispatch({ type: types.MENULIST_FAILED })
    }
  }
}

Answer 1

You are using it the wrong way,

in Redux every action must return an object, and this is a must! so, your dispatch, which is a function, should be called this way.

Besides you only need to declare async the function which returns dispatch. The async keyword determines that the following function will return a promise. As your first function (menulist) is returning the promise returned by the second function (dispatch one) you don't have to specify it.

export const menulist = ({ navigation  }) => async (dispatch) => {
    try {
        dispatch({ type: types.MENULIST_REQUEST_START })
        let response = await menuListByCategories();

        dispatch({ type: types.MENULIST_SUCCESS })
    } catch (error) {
        dispatch({ type: types.MENULIST_FAILED })
    }
  }
}