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

JavaScript React.js

村村老丝

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'))
)

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

第2397篇《成功执行异步Redux动作后过渡到另一条路线》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
逆天小小 2020.03.19

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

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

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

这是我使用的步骤：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android