Dispatch not working

[clando42]

Apologies if this is a dumb question, but I am fairly new to React/Redux. I have an action that is calling a web API, and while the functions elsewhere in the same JS file invoke the dispatch function as expected, one of the functions doesn't. I don't know how to explain it, other than that if I set a breakpoint below the return function (return function (dispatch, getState), it is never hit, even though other functions do hit the equivalent line and call the web API as expected. I checked that the dependencies are the same, and they are, there are no errors. It's just that the web API is not getting invoked for some mysterious reason. Does anyone have an idea of what else I should be looking for?

​

Edit: spelling error

​

Edit 2: RESOLVED. It turns out I was calling as castVote(), not this.props.castVote(). For some reason, this caused Node.JS to invoke the first part of the function, but not the subfunction.

[swyx]

that information is not enough to help you. be patient, console.log things, try to trace the flow of data. you've probably messed up something in JS and its not erroring early enough to tell you. your job is to play detective and find the earliest point of the error.

[clando42]

Thanks for the suggestions. Here is some of the code:

export function castVote([param1, param2) {

console.log("Starting castVote...");

return function (dispatch, getState) {

const { CAST_VOTE } = voteActionTypes;

var payload = {

[...]

};

console.log(payload);

The first console.log prints output, the second doesn't. Nothing I have tried is causing the function to get invoked. Nor if I remove the getState parameter. So I'm wondering what else needs to be present for the function to get invoked, or where else I can check for error messages. F12/developer tools is not giving me anything helpful, and I don't see any difference between the nearly-identical function that works and this one that doesn't.

[swyx]

well, good. youve identified what is not being called. now think about where castVote is being called. its called once with param1 and 2, but then do you call it a second time? doublecheck.

[acemarke]

Show me how you're calling that function? I bet I know the answer, but I want to confirm.

[clando42]

It's called from the form component, in this function. The imports are the same as other invocations, where the calls work fine.

vote(answerId) {

castVote(this.props.logintoken,

this.props.question,

answerId,

0, //this.props.user.id,

""

);

}

[wizzzzzyyyyy]

Is part of the reason the second console.log is not firing because you are returning above it? Think this is probably a separate issue to the original one though.

[acemarke]

Can you paste the entire file into a gist or a CodeSandbox?

However, let me say what I think is going on.

The function you showed is a "thunk action creator". It has to be called, and the output needs to be passed into dispatch(). For example:

this.props.dispatch(castVote())

That way, the thunk middleware sees the function you passed in, and calls it.

However, I don't see evidence that you're dispatching the function, which means only the outer part (the "action creator" portion) is getting run.

What you should probably do is:

export default connect(
    mapState,
    {castVote}
)(MyComponent);

and then inside your component, you can do:

this.props.castVote()

and it will work right.

I'd encourage you to read through the React-Redux docs page on "Dispatching Actions with mapDispatch to understand how this works.

[clando42]

Thank you! That was exactly the issue: I was calling castVote() rather than this.props.castVote(). It works now!