Redux-Form не может перенаправить после успешного завершения onSubmit - PullRequest
Новая
       53

Redux-Form не может перенаправить после успешного завершения onSubmit

0 голосов
/ 13 марта 2019

Я хотел бы перенаправить на другую страницу после успешной отправки в формате Redux.

Я попробовал следующее, но перенаправление либо не работает, либо ничего не делает

REACT-ROUTER-DOM: Это приводит к ошибке 'Ошибка типа: Ошибка чтения свойства' push 'из неопределенного'

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: при успешной отправке данные сохраняются в БД, но страница не перенаправляется. 

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

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

Я также пытался onSubmitSuccess: (result, dispatch, props) => dispatch(push('/facilities'))без оператора {}}, но он не работал

APP.JS, чтобы показать, что путь существует 

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;

СНИЖЕНИЕ: 

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
  }
}

ДЕЙСТВИЕ:

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

МАГАЗИН 

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;
};

1 Ответ

0 голосов
/ 13 марта 2019

response-router-redux устарела, поэтому я не хотел добавлять его в свой проект. Я следовал за этим постом и внес некоторые изменения в настройку маршрутизации, и теперь она работает.

...