Trouble attaching a Redux dispatch to onClick

I’m still working through the React Redux flow and am stuck here:

react-dom.development.js:57 Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.

// App.js render()
    <button onClick={this.props.dispatch_log_to_console_function}>log to console</button>
   
   // outside render
    const map_dispatch_to_props = (dispatch) => {
	return {
		 dispatch_log_to_console_function: dispatch(log_to_console_function())
	}
}

// actions.js
export const log_to_console_function = () => ({ type : "logToConsole" });

According to the error it seems to say this.props.dispatch_log_to_console is an object, even though it looks like a function to me.

I tried putting this.props.dispatch_log_to_console inside an arrow function but that didn’t help. What am I doing wrong here?

dispatch_log_to_console_function: dispatch(log_to_console_function())

You’re dispatching on the moment ^^
Try do do something like :

dispatch_log_to_console_function: () => dispatch(log_to_console_function())
1 Like

Works! I should have tried an arrow function there as well. I’ll remember this at least

1 Like

Right, what React was seeing was an object because that is what dispatch returns.

1 Like