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

村村老丝2020-03-19

我有一组非常简单的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'))
)

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

逆天小小2020/03/19 14:34:00

我最终创建了一个超级简单的中间件，看起来像这样：

import history from "../routes/history";

export default store => next => action => {

    if ( ! action.redirect ) return next(action);

    history.replaceState(null, action.redirect);
}

因此，从那里您只需要确保您的successful操作具有redirect属性即可。另请注意，该中间件不会触发next()。这是有意为之的，因为路径转换应该是操作链的末端。

Sam路易2020/03/19 14:34:00

如果您正在使用react-redux和react-router，那么我认为此链接提供了一个很好的解决方案。

这是我使用的步骤：

通过在React-Router history组件内部渲染<Route/>组件或使用创建高阶组件，将react-router 道具传递给您的组件withRouter。
接下来，创建您要重定向到的路由（我称为mine to）。
第三，用history和调用您的redux操作to。
最后，当您想重定向时（例如，您的redux操作解决时），请调用history.push(to)。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer