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

小编典典

成功执行异步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>

以便显示list或form而不显示两者。

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

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

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

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

阅读 275

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