Redux:从API成功响应后打开外部URL

Question

我想在使用生成的url从api收到成功响应后打开一个url.我试图在reducer中打开这个url,如下所示:

window.open(url, '_blank');

这似乎适用于大多数浏览器,但在safari中不兼容.

任何想法如何实现跨浏览器兼容？有没有办法用react-router-redux做到这一点？

谢谢!

更新:我需要打开一个外部URL,而不是项目中的路由,所以可能是react-router不是解决方案

Answer 1

根据官方redux文档,在减速器中你不应该:

• 改变其论点;
• 执行API调用和路由转换等副作用;
• 调用非纯函数,例如Date.now()或Math.random().

如果您使用redux-thunk中间件来发出api请求,那么在那里执行重定向会更好.

例如:

// actions.js

function asyncApiCall() {
  return function (dispatch) {
    return fetch('/api')
      .then(response => response.json().then(body => ({ response, body })))
      .then(({ response, body }) => {
        if (response.ok) {
          window.open(url, '_blank');
        }
      });
  };
}

Answer 2

唯一允许在 Safari/Chrome 中打开新窗口的 javascript 是直接附加到点击处理程序（以及其他直接用户输入处理程序）的 javascript。在过去的版本中，人们想出了一些作弊的方法（比如生成一些其他元素——表单或 div——并用 JavaScript 模拟用户输入），但较新的版本在检测这一点方面更加聪明。

并且您不应该在减速器中包含此逻辑。

也许方法是弹出一些模式并提供给用户单击按钮。您可以在收到数据后的操作中通过 {type:"OPEN_MODAL"} 类型的调度操作来执行此操作