[Solved]-IsValidated not working with redux in react stepzilla-Reactjs

You need to define your function

function isValidated(){
    alert("checking isValidated calling")
    return this.state.count > 2
}

you need to add function before your function name.

And if it is ES6

const isValidated = () => { }

It just works without connecting Redux due to connect() function always return a new Component and it will not have isValidated method you wrote.

You can use connect() function at MultiStep component and pass props to child components. You can see my code:

...

class MultiStep extends Component {
    render() {
        const {example} = this.props

        const steps = [
            { name: 'step1', component: <RegistrationType {...example} /> },
            { name: 'step2', component: <PersonalDetails /> },
            { name: 'step3', component: <ContactDetails /> }
        ]

        return (
            <Fragment>
                <h1 className="page-header">Register for New Account</h1>
                <StepZilla
                    steps={steps}
                    stepsNavigation={true}
                    nextButtonText='Save and Continue'
                    backButtonText='Back'
                    nextButtonCls="btn btn-warning active pull-right mr-0"
                    backButtonCls="btn btn-primary pull-left ml-25"
          hocValidationAppliedTo= {[0,1, 2]}
                />

            </Fragment>
        );
    }
}
..
...

export connect(mapStateToProps, mapDispatchToProps)(MultiStep)

you can do something like this, send props to your steps rather than using redux connect. this is extra long code but it may help some, understand what is happening.

    class MultiStep extends Component {
      render() {

        const steps = [
          { name: "General Info", component: <StepOne {...this.props} /> },
          { name: "Personal Info", component: <StepTwo {...this.props} /> },
          { name: "Educational Info", component: <StepThree {...this.props} /> },
          { name: "Address", component: <StepFour {...this.props} /> },
          { name: "Account Info", component: <StepFive {...this.props} /> },
          { name: "Review", component: <StepSix {...this.props} /> },
          { name: "Done", component: <StepSix {...this.props} /> }
        ];

        return (
          <StepZilla
            steps={steps}
            stepsNavigation={true}
            nextButtonText="Save and Continue"
            backButtonText="Back"
            //hocValidationAppliedTo={[0, 1, 2, 3, 4, 5, 6]} //commenting this worked for me.
            nextButtonCls="btn btn-prev pull-right nextBtn btn-color"
            backButtonCls="btn btn-next btn-color"
          />
        );
      }
    }

    // export default MultiStep;
    const mapStateToProps = state => ({
      errors: state.errors
    });

    const mapDispatchToProps = {
      setGeneralInfo,
   };

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(MultiStep);

and in the steps you can write your isValidated method in your component.

  isValidated = () => {
    const genInfo = {
      employee_name: this.state.employee_name,
      employee_code: this.state.employee_code,
      employee_email: this.state.employee_email,
      password: this.state.password,
   };
    console.log(genInfo);
    this.props.setGeneralInfo(genInfo, this.props.jumpToStep);
    return false; // make it return false. just in case. lol

  };

and in your action

export const setGeneralInfo = (generalDetails, jumpToStep) => dispatch => {
  console.log("gen details:", generalDetails);
  Api.setGeneralInfo(generalDetails)
    .then(res => {
      console.log("res gen details:", res);
      jumpToStep(1); //<<<< JUMP STEPS FROM HERE <STEPS START FROM 0>

      return dispatch({
        type: SET_GENERAL_INFO,
        payload: res.data
      });
    })
    .catch(err => {
      //jumpToStep(0);
      console.log("err gen details:", err.response);
      return dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      });
    });
};