小编典典

成功执行异步redux动作后过渡到另一条路由

reactjs

我有一组非常简单的react组件:

  • container挂接到redux并处理操作,存储订阅等
  • list 显示我的物品清单
  • new 这是一种将新项目添加到列表的形式

我有一些反应路由器路由,如下所示:

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

以便显示listform而不显示两者。

我想做的是,一旦成功添加了新项目,就让应用程序重新路由到列表。

到目前为止,我的解决方案是.then()在async之后设置a dispatch

dispatch(actions.addProduct(product)
  .then(this.transitionTo('products'))
)

这是执行此操作的正确方法,还是应该以某种方式触发其他操作以触发路线更改?


阅读 278

收藏
2020-07-22

共1个答案

小编典典

如果您不想使用像Redux Router这样的更完整的解决方案,则可以使用Redux History
Transitions
,它可以让您编写如下代码:

export function login() {
  return {
    type: LOGGED_IN,
    payload: {
      userId: 123
    }
    meta: {
      transition: (state, action) => ({
        path: `/logged-in/${action.payload.userId}`,
        query: {
          some: 'queryParam'
        },
        state: {
          some: 'state'
        }
      })
    }
  };
}

这与您的建议相似,但稍微复杂一点。它仍然在后台使用相同的历史库,因此与React
Router兼容。

2020-07-22