How to build a multi-step form flow with react-redux, that changes URLs per step

Question

I'm working to build a multistep form flow where the user first loads: /welcome, which should then take the user through the following

step 0: `/welcome` (Should redirect to step 1)
step 1: `/welcome/workplace`
step 2: `/welcome/profile`

Here is what I have so far:

App.jsx:

import Welcome from '../containers/welcome/Welcome';

const App = ({store}) => {
  return (
    <StoreProvider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <PrivateRoute exact path="/welcome" layout={MainLayout} component={Welcome} />
          <WithMainLayout exact path="/" component={Home} />
          <AuthRoutes path={`/${clientResourceName}`} wrapper={WithMainLayout} />
          <WithMainLayout component={NotFound} />
        </Switch>
      </ConnectedRouter>
    </StoreProvider>
  );
};

Welcome.js

import React from 'react';
import WorkPlacePage from '../../components/welcome/WorkPlacePage';

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  showStep() {
    const {history} = this.props

    console.log('showStep');
    console.log({history})

    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
    }
  }

  render() {
    var style = {
      width : (this.state.step / 4 * 100) + '%'
    }
    return (
      <main>
        <span className="progress-step">Step {this.state.step}</span>
        <progress className="progress" style={style}></progress>
        {this.showStep()}
      </main>
    )
  }
}

export default Welcome;

WorkPlacePage.js

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class WorkPlacePage extends React.Component {

  render() {

    console.log('this.props.history')
    console.log(this.props.history)

    return (
      <div>
        <h1>Workplace</h1>
        <span>
        survey things
        <button onClick={() => this.props.history.push("/confirmation")}>next page</button>
        </span>
      </div>
    );
  }
}

export default WorkPlacePage;

As a React and Redux newbie, I could use advice on the following:

Am I structuring this multi-step form correctly?
If a user loads /welcome in their browser, what is the right way to auto-redirect the browser to step 1 /welcome/workplace
On WorkplacePage.js, I'm getting the following JS error when I click the NEXT button: =Uncaught TypeError: Cannot read property 'push' of undefined --- Why is history not defined?

@BlairAnderson thanks for the reply. Any thoughts on the first two questions? — AnApprentice, May 29 '17 at 17:48
1. yes/sure this looks fine you're making a state machine and will have to play around with structure. — Blair Anderson, May 29 '17 at 17:53
2. to redirect you can render `` - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md — Blair Anderson, May 29 '17 at 17:54

Blair Anderson · Answer 1 · 2017-05-29T18:05:46.963

1

yes sure this structure looks ok. I think you'll want to create a separate route component for each step because i'm sure that each step will grow with more rules and validations.
To redirect you can render <Redirect to="/somewhere/else"/> - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md
you need to pass props into the <WorkPlacePage />

something like:

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  render() {
    const {history} = this.props
    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      case 2:
        return (
          <div>
            <h1>WIP</h1>
          </div>
        );
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
        }

  }
}

edited May 29 '17 at 18:05

answered May 29 '17 at 17:58

Blair Anderson

19,463
8
77
114

1

Thank you... where should this live? `{history} = this.props` – AnApprentice May 29 '17 at 18:04
1

@AnApprentice inside the Welcome component where you are rendering the `WorkPlacePage` – Blair Anderson May 29 '17 at 18:06
thanks but that is still broken. In WorkPlacePage.js, in the render func when I console.log `this.props.history` it is still undefined. – AnApprentice May 29 '17 at 18:09
Also, if I console.log `console.log({history})` in Welcome.js I get the Object history as undefined – AnApprentice May 29 '17 at 18:11
1

can you log `console.log(this.props)` AND `console.log(this.context)` ? – Blair Anderson May 29 '17 at 18:14
where in the above should I log it? – AnApprentice May 29 '17 at 18:15
Those two logs in WorkPlacePage.js results in Object {history: undefined} and Object {} – AnApprentice May 29 '17 at 18:19
Do I need to be adding history in a mapStateToProps? FYI, I updated the code above to add more clarity. Thanks – AnApprentice May 29 '17 at 18:30
Oh, maybe the issue is `props.history` is deprecated? https://stackoverflow.com/questions/36330617/this-props-history-is-deprecated-react-router – AnApprentice May 29 '17 at 18:38

How to build a multi-step form flow with react-redux, that changes URLs per step

1 Answers1