const disabled = (state = true, action) => {
  return action.type === "TOGGLE" ? !state : state;
};

class Button extends React.Component {
  render() {
    const { props } = this;
    console.log("rendering", props.value);
    return (
      <div>
        <input
          type="checkbox"
          onClick={() => {
            props.toggle().then(() => {
              console.log("This will be called after re-render");
              this.ref.focus();
            });
            console.log("This will be called before re-render");
          }}
        />
        <input
          disabled={props.disabled}
          ref={ref => {
            this.ref = ref;
          }}
        />
      </div>
    );
  }
}

const toggle = () => ({
  type: "TOGGLE"
});

const A = connect(
  state => ({ disabled: state }),
  dispatch => ({
    toggle: () => {
      dispatch(toggle());
      return Promise.resolve();
    }
  })
)(Button);

const App = () => (
  <Provider store={createStore(disabled, applyMiddleware(thunk))}>
    <A />
  </Provider>
);

In the above code, this.ref.focus() must be called only after the component re-renders, as an input with disabled prop cannot be focused.

I return a Promise in the action dispatcher function, and it seems like the Promise only gets resolved after the re-rendering caused by the dispatched action.

Why does this work and is it a guarantee?

If not, how should I make sure the code only executes after re-rendering has been triggered by the action, without adding extra middleware like redux-promise or doing it in componentDidUpdate?