alexandernst alexandernst - 3 months ago 11
React JSX Question

Code after a dispatch() isn't being executed

I have some code that looks like this:

Reducer:

const foo = (bar) => {
console.log("here");
return {
type: "FOO",
bar
}
}


Inside the render() of a container

console.log(1);
console.log(this.props.dispatch);
console.log(foo);
this.props.dispatch(foo(
{a: 1, b: 2}
));
console.log(2);


The output that I see in Chrome is:

1
<dispatch function>
<my foo reducer function>
here


Note that the
2
is missing.
I don't get any errors, no redirects, no nothing. The code execution just stops after the
dispatch()
call.

Any suggestions how could I debug that or ideas what could the problem be?

Answer

For the record :)

You can't call dispatch() in render().

(Because if you do, your props are updated, so a fresh render is called for in the middle of the current one. That's going to be either a hangup (waiting for yourself) or an infinite recursion. The evidence says hangup! )