Request failed with status code 404 (REDUX) - reactjs

Question

Can't seem to pull data from database but according Redux DevTools the actions PASSWORD_LIST_REQUEST seems to be firing. What is going wrong here? I checked my original route, it should be going towards "api/passwords" in the server, is this a backend problem or Redux problem?
I checked the backend url routes with postman, so thats all good.
ACTIONS
export const listPasswords = () => async (dispatch) => {
try {
dispatch({ type: PASSWORD_LIST_REQUEST });
const { data } = await axios.get("/api/passwords");
dispatch({
type: PASSWORD_LIST_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: PASSWORD_LIST_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
REDUCERS
export const passwordListReducer = (state = { passwords: [] }, action) => {
switch (action.type) {
case PASSWORD_LIST_REQUEST:
return {
loading: true,
passwords: [],
};
case PASSWORD_LIST_SUCCESS:
return { passwords: action.payload, loading: false };
case PASSWORD_LIST_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
STORE
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { passwordListReducer } from "./reducers/passwordReducers";
const reducer = combineReducers({ passwordList: passwordListReducer });
const initialState = {};
const middleware = [thunk];
const store = createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
Server
import passwordRoutes from "./routes/passwordRoutes.js";
dotenv.config();
connectDB();
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.get("/", (req, res) => {
res.send("API is running");
});
app.use("/api/passwords", passwordRoutes);
app.use(notFound);
app.use(errorHandler);
const PORT = process.env.PORT || 5000;
app.listen(
PORT,
console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`)
);

Answer 1

Seems like your call to endpoint might be going to the wrong url here
const { data } = await axios.get("/api/passwords");
The above axios call would point to your app url, say you app is running on localhost:3000, an API call would be made to http://localhost:3000/api/password by default.
If your app and back end run on different ports on your localhost, you have to set the domain on the axios call. From you code sample, I see you set you APIs to run from port 5000.
const { data } = await axios.get("http://localhost:5000/api/passwords");
Tip
If you don't want to keep repeating the base url, you can create an axios instance
export const request = axios.create({baseUrl: "http://localhost:5000"});
Then make your requests this way
import { request } from "path to request module";
...
const { data } = await request.get("/api/passwords");
...

Answer 2

I needed a proxy in package.json.
"proxy": "http://localhost:5000",