在 onSubmit 成功后 Redux-Form 无法重定向答案

【问题标题】：Redux-Form unable to redirect after onSubmit Success在 onSubmit 成功后 Redux-Form 无法重定向
【发布时间】：2019-08-04 08:59:31
【问题描述】：

我想在 redux-form 提交成功后重定向到另一个页面。

我已尝试以下操作，但重定向失败或不执行任何操作

反应路由器 DOM：这个结果是一个错误'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);

反应路由器减少：这样提交成功，数据保存到DB，但是页面没有重定向。

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')) 没有 {} around dispatch 语句，但它不起作用

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

提交成功后返回的重定向对象

商店

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

【问题讨论】：

你的reducer调试了吗？ console.log() 您的状态/动作并确保您的调度正常工作
@FrankerZ 我确实在 onSubmitSuccess onSubmitSuccess: (result, dispatch, props) => { console.log("SUCCESS"); props.history.push('/facilities') } 中添加了一个控制台语句，并且我双向都收到了成功语句
不，在你的 redux reducer 中。简单地添加console.log("SUCCESS") 可以确保它到达dispatch(push('/facilities'))，但它不能确保push('/facilities') 正在返回一个正确的对象，也不能确保调度实际上正在工作。在您的 REDUCER 中，您需要添加一些调试。确保 push('/facilities') 正在返回一个对象，并且 dispatch 实际上是将该对象分派给您的 reducer。
@FrankerZ - 我不确定我是否完全理解你在问什么。我在 ACTION 中确实有一个警报语句，它确实被触发了。为了清楚起见，我添加了减速器和动作
在你的默认reducer中，在顶部添加console.log(state, action)。您应该看到当dispatch() 发生时传递的某种类型的对象。我建议阅读有关如何调试 redux 状态/操作的更多信息。

标签： redirect redux redux-form react-router-dom react-router-redux

【解决方案1】：

react-router-redux 已被弃用，所以我不想将它添加到我的项目中。我关注了this post，并对路由的设置方式进行了一些修改，现在它可以工作了。

【讨论】：