react-router路由跳转的问题

Question

问题描述

这么一个场景，2个页面 一个是form表单，一个是table列表

现在在form表单中 使用reduer dispatch 新增方法之后，需要跳转到 table页面。

问题出现的环境背景及自己尝试过哪些方法

一开始的做法是在dispatch后面，调用router的push方法 ，跳转到table页面，
但是发现 table有一个获取数据的api会在form页面的save方法之前调用，导致获取的数据是form表单提交之前的数据
虽然可以使用 延迟 避免这样的问题。
但是想知道是否有别的方法。

另外想到的就是在reducer中调用router的push方法来完成 路由的跳转

相关代码

  function formSubmit(e) {
    e.preventDefault()
    props.form.validateFields((error, value) => {
      if (!error) {
        props.saveExpress(value)
        props.history.push('/express/list')
      }
    })
  }

这是调用dispatch之后 调用push方法的代码

你期待的结果是什么？实际看到的错误信息又是什么？

想知道 大家正常的逻辑是在哪里调用的

查看了 antd-pro代码，使用回调函数解决
1、改造saveExpress

   props.saveExpress(value,()=>props.history.push('/express/list'))

2、修改对应的action

export const saveExpress = (express,callback) => ({
  type: Actions.SAVE_EXPRESS,
  express,
  callback
})

3、修改对应的epic（由于使用的redux-observable 所以会有这个方法）

const saveExpress = action$ =>
  action$.pipe(
    ofType(Actions['SAVE_EXPRESS']),
    switchMap(params =>
      postExpress({ ...params.express }).then(() => {
        params.callback()
        return saveExpressSuccess()
      })
    )
  )

由此 问题可以解决

Answer 1

改造下saveExpress方法，让此方法提供一个成功的回调，然后将props.history.push('/express/list')写在回调函数中。

Answer 2

saveExpress 异步方法return Promise，然后使用async/await

props.form.validateFields(async (error, value) => {
  if (!error) {
    await props.saveExpress(value)
    props.history.push('/express/list')
  }
})