Valid to dispatch multiple actions from an event handler?

[bfink13]

I'm in a situation where I'd like to dispatch two actions when a text box is blurred - I want to mark it as "touched" and also save it if there are no validation errors. I keep track of validation in the "change" reducer and only show the error message if a box has been "touched". I only want to save if there are no errors:

var item = this.props.items[index];
if (!item.error) {
    this.actionCreators.saveItem(item.name, item.value);
}

this.actionCreators.touchItem(item.name);

I'm using API middleware similar to the Real World example. It doesn't seem right to dispatch multiple actions in a single event handler since the second action will be working with state that is out of date.

I feel like I'm missing something simple, as this seems to be a pretty common scenario.

Does anyone have recommendations?

[gaearon]

You can use redux-thunk which lets you both dispatch several times and read state in between these dispatches.

In general, though, why do you need to put name in an action, if the reducer already has access to this state by the virtue of managing it? It's best to only put ids or original input in the actions—not the state you read.

[gaearon]

Also, check out redux-form which does most of this for you.

[bfink13]

Thanks for the quick reply!

In this case I'm saving/touching onBlur. The code snippet above takes place within the onBlur handler. My example above is actually quite poor - here is an updated version:

handleBlur = (event) => {
    var item = this.props.items[event.target.name];
    if (!item.error) {
        this.actionCreators.saveItem(event.target.name, item.value);
    }

    this.actionCreators.touchItem(event.target.name);
}

Does this make more sense?

[gaearon]

I guess this confuses me:

It doesn't seem right to dispatch multiple actions in a single event handler since the second action will be working with state that is out of date.

Where is the outdated state? If you fire two actions in a row, they will synchronously update state, each one building on top of the most recent state. I'm not sure what's outdated here.

[bfink13]

Yes, you're right....I think I might be over thinking this. I'm also using react-redux - I was under the impression that render would be called every time an action is dispatched (and the redux state is set), but maybe that is a non-issue.

[gaearon]

I'm also using react-redux - I was under the impression that render would be called every time an action is dispatched (and the redux state is set), but maybe that is a non-issue.

This is correct, but it's not really a problem until you see it being a problem. You can also fire just one action, and have multiple reducers handling it.

[bfink13]

I'll take it. Thanks for the help!

[robertleeplummerjr]

handled here I believe https://github.com/reactjs/redux/pull/1813/commits