Redux-Form unable to redirect after onSubmit Success

Question

I would like to redirect to another page after a successful submit in redux-form.

I have tried the follow but the redirect either fails or doesn't do anything

REACT-ROUTER-DOM: This results is an error 'TypeError: Cannot read property 'push' of undefined'

import { withRouter } from "react-router-dom";

FacilityComplianceEditForm = withRouter(connect(mapStateToProps (FacilityComplianceEditForm));

export default reduxForm({
    form: "FacilityComplianceEditForm",
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    onSubmitSuccess: (result, dispatch, props) => { 
    props.history.push('/facilities') }
})(FacilityComplianceEditForm);

REACT-ROUTER-REDUX: This submits successfully, the data is saved to the DB, but the page does not redirect.

import { push } from "react-router-redux";

export default reduxForm({
    form: "FacilityComplianceEditForm",
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    onSubmitSuccess: (result, dispatch, props) => { dispatch(push('/facilities')) }
})(FacilityComplianceEditForm);

I also tried onSubmitSuccess: (result, dispatch, props) => dispatch(push('/facilities')) without the {} around dispatch statement but it didn't work

APP.JS to show the path does exist

class App extends Component {
render() {
  return (
    <div>
      <Header />
        <div className="container-fluid">
         <Switch>
            <Route exact path="/facilities" render={() => <FacilitySearch {...this.props} />} />
          <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props} />} />
         <Route exact path="/facilities/compliance/:id" render={(props) => <FacilityComplianceEditForm id={props.match.params.id}{...this.props} />
        <Redirect from="/" exact to="/facilities" />
        <Redirect to="/not-found" />
      </Switch>
    </div>
    <Footer />
  </div>
  );
 }
}

export default App;

REDUCER:

export const complianceByIdReducer = (state = INTIAL_STATE.compId, action) => {
switch (action.type) {
console.log(state, action)
    case "CREATE_NEW_COMPLIANCE":
        return {
            ...state,
            compId: action.compCreate
        }
    default:
        return state
  }
}

ACTION:

export const createCompliance = (id, compObj) => {
  return dispatch => {
    axios.post("/api/facilities/compliance/" + id, compObj)
     .then(res => { return res.data })
     .then(compCreate => {
       dispatch(createComplianceSuccess(compCreate));
      alert("New compliance created successfully") //this does get triggered
  })
  }
}

const createComplianceSuccess = compCreate => {
  return {
    type: "CREATE_NEW_COMPLIANCE",
    compCreate: compCreate
  }
}

REDIRECT OBJECT RETURNED FROM SUBMIT SUCCESS

STORE

import * as redux from "redux";
import thunk from "redux-thunk";
import {
  facilityListReducer,
  facilityReducer,
  facilityLocationReducer,
  facilityHistoricalNameReducer,
  facilityComplianceReducer,
  complianceByIdReducer
} from "../reducers/FacilityReducers";
import { projectFormsReducer } from "../reducers/FormsReducers";
import { errorReducer } from "../reducers/ErrorReducer";
import { reducer as formReducer } from "redux-form";

export const init = () => {
  const reducer = redux.combineReducers({
     facilityList: facilityListReducer,
    facility: facilityReducer,
    facilityLocation: facilityLocationReducer,
    historicalNames: facilityHistoricalNameReducer,
    facilityCompliance: facilityComplianceReducer,
    compId: complianceByIdReducer,
    countyList: projectFormsReducer,
    errors: errorReducer,
    form: formReducer
  });

  const store = redux.createStore(reducer, redux.applyMiddleware(thunk));
  return store;
};

Have you debugged your reducer? `console.log()` your state/action and ensure your dispatch is working correctly — Blue, Mar 13 '19 at 15:51
@FrankerZ I did add a console statement to onSubmitSuccess `onSubmitSuccess: (result, dispatch, props) => { console.log("SUCCESS"); props.history.push('/facilities') }` and I recieve the success statement both ways — reactFullStackDeveloper, Mar 13 '19 at 15:54
No, in your redux reducer. Simply adding `console.log("SUCCESS")` ensures that it's getting to `dispatch(push('/facilities'))`, but it DOES NOT ensure that `push('/facilities')` is returning a proper object, nor that dispatch is actually working. In your REDUCER, you need to add some debugging. Make sure `push('/facilities')` is returning an object, and dispatch is actually dispatching that object to your reducer. — Blue, Mar 13 '19 at 15:56
@FrankerZ - I'm not sure that I'm completely understanding what you're asking. I do have an alert statement in the ACTION which does get triggered. I have added both the reducer and the action for clarity — reactFullStackDeveloper, Mar 13 '19 at 16:01
In your default reducer, add `console.log(state, action)` at the top. You should see some type of object that is passed when `dispatch()` happens. I suggest reading more on how to debug redux state/actions. — Blue, Mar 13 '19 at 16:04
@FrankerZ I did add a console.log statement to the reducer and it does return the appropriate 'CREATE_NEW_COMPLIANCE' object — reactFullStackDeveloper, Mar 13 '19 at 16:08
We're not looking for a `CREATE_NEW_COMPLIANCE` object. We're looking for a `LOCATION_CHANGE`, or something similar (Which SHOULD be passed from the returned `push('/facilities')`). — Blue, Mar 13 '19 at 16:15
@FrankerZ I do get a /Call History Method Object that contains the requested route (please see above) — reactFullStackDeveloper, Mar 13 '19 at 16:25
You need to ensure that the routing reducer is added, so it can handle location changes. See the docs [here](https://github.com/reactjs/react-router-redux): `import { syncHistoryWithStore, routerReducer } from 'react-router-redux'` ... `routing: routerReducer` — Blue, Mar 13 '19 at 16:44

score 0 · Answer 1 · answered Mar 13 '19 at 20:48

0

react-router-redux is deprecated so I did not want to add it to my project. I followed this post and made some modification to how routing was set up and it now works.

answered Mar 13 '19 at 20:48

reactFullStackDeveloper

829
2
15
32

Redux-Form unable to redirect after onSubmit Success

1 Answers1