score:3

Accepted answer

you can 'wrap' those functions in 'click handler'.

//call it on button click

handleclick = () => {
  if (validate()) {
    //call save function
    save()
  }
}

validate = () => {
  //do something
  //check validness and then
  if (valid) return true 
}

score:5

there are many ways to do what you'd like. however, as a general rule, don't store anything in redux that can be derived. isvalid can be derived by running your validation on your field(s). moreover, i don't think that intermediate state like form field values that are changing belong in redux. i'd store them in react state until they're considered valid and submitted.

with that out of the way, as spooner mentioned in a comment, you can call a sync action within a thunk. or you can access state within the thunk.

option #1

// action creator
export default function dosomething(isvalid) {
    return (dispatch) => {

        dispatch(setvalid(isvalid));

        if (isvalid) {
            return fetch() //... dispatch on success or failure
        }
    };
}

option #2

// component
dispatch(setvalid(isvalid));
dispatch(dosomething());

// action creator
export default function dosomething() {
    return (dispatch, getstate) => {

        const isvalid = getstate().isvalid;

        if (isvalid) {
            return fetch() //... dispatch on success or failure
        }
    };
}

Related Query

More Query from same tag