I have a MERN application that uses a combination of:
to manage the data flow throughout my application. Redux is mainly used for login + authorization (along these lines). A few other tables that are shared across many pages on my app are fetched through redux and accessible via reduxState. However, since most of the routes in my MERN app do not require shared state, I simply use axios for the majority of data fetching from my Mongo database.
I am currently having a problem with only the redux fetches, both for login/authorization as well as for all of the other tables fetched through redux. In my console, I am receiving the following errors on redux actions:
The node API for the app is served on port 8080, and if I copy this url, change the port, and paste http://localhost:8080/api/cbb/teams/list
directly into my chrome browser, it does return the data as I would expect. So I believe there's an issue with port 3000 / 8080. Port 3000 is where the client side of the application is served (I believe), which I figure is why Redux is doing the GET request to port :3000.
My question is, what can I do to resolve / debug this, so that my Redux fetches work once again? I assume that I simply need to "point" the Redux fetches to the right port, but I'm not sure how to do this.
Along the lines of this question, my client
file (with all of my front end code) is inside of the directory for my node API. In my client/package.json
file, I have a line with "proxy": "http://localhost:8080",
Here's the main function from teams-action
, which builds the URL that is then fetched:
export function fetchTeams(team, conference) {
return dispatch => {
let url = '/api/cbb/teams';
if (team) { url += '/team/' + team; }
else if (conference) { url += '/conference/' + conference; }
else { url += '/list'; }
console.log('fetchTeams url: ', url);
dispatch(fetchSportsDataBegin());
return fetch(url)
.then(handleErrors)
.then(res => res.json())
.then(json => {
dispatch(fetchSportsDataSuccess(json));
return json;
})
.catch(error => dispatch(fetchSportsDataError(error)));
};
}
fetchCBBTeams
is called from my main container component for the page. The url that is printed out is simply /api/cbb/teams/list
, since I am intentionally calling it with no parameters
You're running into the same issue as your linked question and the same answer will fix the problem.
If you're using the package.json
proxy
property to configure the API origin then you'll need to find some way of getting that value into your application code and using it to configure the fetch URLs you are generating.
As an example, at the bottom of the "React Hooks + Redux - User Registration and Login Tutorial & Example" article you have linked, in the React Webpack Config section it shows how they are configuring the config.apiUrl
value so it can be used in their application.
New example using .env file to configure API url
You can use a .env
file with create-react-app to configure this sort of value for your application.
The benefit of this is that it's a standard and well-understood pattern and it allows easy configuration of development and production variables like this.
Create a .env
file in the root of your project to configure the API origin for production:
# .env
REACT_APP_PROXY=http://my-production-domain-and-port:8080
Then create a .env.development
file to configure the API origin for your local development:
# .env.development
REACT_APP_PROXY=http://localhost:8080
create-react-app
should automatically load this file and it's variables into your application (see the docs for details).
Then you can access this environment variable inside your application:
// config.js
// You can collect together any other environment variables here as well
const apiUrl = process.env.REACT_APP_PROXY;
export default {
apiUrl
}
import config from './path-to/config';
export function fetchTeams(team, conference) {
return dispatch => {
let url = `${config.apiUrl}/api/cbb/teams`;
if (team) { url += '/team/' + team; }
else if (conference) { url += '/conference/' + conference; }
else { url += '/list'; }
console.log('fetchTeams url: ', url);
dispatch(fetchSportsDataBegin());
return fetch(url)
.then(handleErrors)
.then(res => res.json())
.then(json => {
dispatch(fetchSportsDataSuccess(json));
return json;
})
.catch(error => dispatch(fetchSportsDataError(error)));
};
}