fetch will not dispatch if I getState first - redux

Question

I changed the signature of an action creator to make a call to getState before trying to dispatch fetch, but now fetch is not getting called.
StartingPoint: I have an async action that makes an api call using fetch and then dispatches a success or error action once it's done, as below. I call this action from a container like so and it works fine:
dispatch(actions.getData()); //from a container
export function getData(){
return (dispatch : any) => {
return fetch(
'http://localhost:8000/api',{}
).then(
response => response.json()
).then(
json => dispatch(successAction(json)),
err => dispatch(notify("SERVER_ERROR"))
);
}
}
The problem is that I need to call getState in the action, so that I can have an option about which port to query. Therefore, I changed the getData action to what you see below. However, when I call the action creator like this dispatch(actions.getData());, it's not making a network call, although the console.log statement is running.
Question: how can the getData function be written to allow for making a call to getState before running the fetch? (and, related, what is the purpose of wrapping it in the dispatch return)?
export const getData = () => (dispatch: any, getState: any) => {
let state = getState();
let url = //code omitted - getting port from state object
console.log("this log statement runs");
return (dispatch : any) => {
return fetch(
url,{}
).then(
response => response.json()
).then(
json => dispatch(successAction(json)),
err => dispatch(notify("SERVER_ERROR"))
);
}
}
added Promise support
const addPromiseSupportToDispatch = (store: any) => {
const rawDispatch = store.dispatch;
return (action: any) => {
if (typeof action.then === 'function') {
return action.then(rawDispatch);
}
return rawDispatch(action);
};
};
store.dispatch = addPromiseSupportToDispatch(store);

Answer 1

You inserted an additional return I think. This should be the right code block
export const getData = () => (dispatch: any, getState: any) => {
let state = getState();
let url = //code omitted - getting port from state object
console.log("this log statement runs");
return fetch(
url,{}
).then(
response => response.json()
).then(
json => dispatch(successAction(json)),
err => dispatch(notify("SERVER_ERROR"))
);
}
EDIT
If I had to use your original code:
export function getData(){
return (dispatch : any, getState: any) => { // <= second parameter provided by redux-thunk
let url = getState().url; //can call getState here
return fetch(
'http://localhost:8000/api',{}
).then(
response => response.json()
).then(
json => dispatch(successAction(json)),
err => dispatch(notify("SERVER_ERROR"))
);
}
}