CODEWITHSUNDEEP
javascriptreactjsreduxredux-form
Jackson Holiday Wheeler
Jackson Holiday Wheeler

Reputation: 771

Redux Form: How to submit before function is triggered?

I'm having an issue with a quiz I'm making in React/Redux with Redux Form. The quiz has conditional logic (i.e. if you answer "yes" to question 1, you go to question 2; if "no", you go to question 6, etc.), and in order for the conditional logic to correctly redirect the user after each question is answered, the answers need to be recorded before the redirection takes place.

It seems that this isn't happening as I expected...and it seems to be from the way that Redux Form is recording the answers only after the function is being called.

How can I set this up such that the value of the field is being recorded in the store (in form.quiz.values) before I redirect the user?

Here is the code for the relevant component:

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screen: 1
    }
  }

  nextScreen = () => {
    if (this.state.screen === 12) {
      this.setState({screen: 13});
      this.props.sendAnswers(this.props.form.quiz.values);
    } else if (this.state.screen === 1 && this.props.result["own-property"] === "No") {
      this.setState({screen: 7});
    } else if (this.state.screen === 2 && this.props.result["property-type"] === "Owner-occupied") {
      this.setState({screen: 7});
    } else if (this.state.screen === 6) {
      this.setState({screen: 10});
    } else {
      this.setState({screen: this.state.screen + 1});
    }
  }

  lastScreen = () => {
    if (this.state.screen === 1) {
      this.props.history.push('/');
    } else if (this.state.screen === 7 && this.props.result["property-type"] === "Owner-occupied") {
      this.setState({screen: 2});
    } else if (this.state.screen === 7 && (this.props.result["property-type"] === undefined || this.props.result["property-type"] === null)) {
      this.setState({screen: 1});
    } else if (this.state.screen === 10 && (this.props.result["financial-goals"] === undefined || this.props.result["financial-goals"] === null)) {
      this.setState({screen: 6});
    } else {
      this.setState({screen: this.state.screen - 1});
    }
  }

  render() {
    const currentQuestion = Object.assign({}, data.questions[this.state.screen -1]);

    return (
      <div className="quiz">
        <ArrowButton src='/images/arrow-button.png' route="back" handleClick={this.lastScreen} />
        <QuestionContainer
          question={currentQuestion}
          handleClick={this.nextScreen} />
        <ArrowButton src='/images/arrow-button.png' route="forward" handleClick={this.nextScreen} />
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    form: state.form,
    result: state.result,
  }
};

const mapDispatchToProps = dispatch => {
  return {
    sendAnswers: (answers, result) => dispatch(sendAnswers(answers, result)),
  }
};

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

Thank you in advance!

Upvotes: 0

Views: 59

Answers (1)

hairmot
hairmot

Reputation: 2975

I'm guessing that you redirect via changing the value of screen in your state?

If so, this is updating independently of the redux action responsible for sending your answer. My advice would be to update the value of screen via your redux action.

Upvotes: 1

Related Questions