5

生成されたURLでAPIから成功応答を受け取った後にURLを開きたいです。次のように、レデューサー内でその URL を開こうとしています。

window.open(url, '_blank');

これはほとんどのブラウザで問題なく動作しているようですが、Safari では互換性がありません。

これをどのように実装してクロスブラウザ互換性を持たせることができますか? react-router-redux でそれを行う方法はありますか?

ありがとう！

更新: プロジェクトのルートではなく、外部 URL を開く必要があるため、おそらく react-router は解決策ではありません

4

3 に答える 3

3

Safari/Chrome で新しいウィンドウを開くことが許可されている唯一の JavaScript は、クリック ハンドラ (およびその他の直接ユーザー入力ハンドラ) に直接アタッチされた JavaScript です。過去のバージョンでは、いくつかのカンニング方法 (他の要素 (フォームや div など) を生成し、JavaScript でユーザー入力をシミュレートするなど) を考え出していましたが、新しいバージョンではこれをより賢く検出しています。

このロジックをレデューサーに含めるべきではありません。

おそらく、いくつかのモーダルをポップアップし、ユーザーのクリックボタンに提供する方法です。{type:"OPEN_MODAL"} の種類のディスパッチ アクションを介して、データを受信した後のアクションで実行できます。

于 2016-07-01T13:34:10.197 に答える
3

レデューサーは純粋である必要があるため、そこで新しいウィンドウを開こうとするべきではありません。代わりに、すべてのフェッチ要求に対してミドルウェアを作成する必要があります。その後、要求が成功すると、リダイレクトしたり、モーダルを開いたり、必要なものをすべて開いたりできます。次に例を示します。

import { push } from 'react-router-redux';

export default fetchMiddleware() {
 return ({ dispatch, getState }) => next => action => {
   if (!action.fetch) {
     return next(action);
   }

   const promise = fetch(action.fetch, { someOptionsHere })
     .then(response => response.json())
     .then(data => {
       if (whateverLogicYouNeedToRedirect) {
          return next(push('/go/somewhere/else'));
       }
       next({type: action.type, response: data});
     })
     .catch( error => {
        // check for errors in the response and
        // maybe redirect to login here
        next({type: 'FETCH_FAIL', error });
     });

   return promise;
 };
}

これは、API からデータをフェッチし、JSON 応答を解析し、ロジックに基づいて別の URL にリダイレクトしたり、フェッチ応答でアクションを返したりする単純なミドルウェアです。アクション クリエーターからこのミドルウェアを次のように使用します。 :

 export function loadData() {
   return {
     type: 'LOAD_SOMETHING',
     fetch: '/api/something/here',
   };
 }

params を受け入れるようにミドルウェアを改善し、post、put、deleterequests 、および必要なものを定義する方法を改善する必要がありますが、これでアイデアが得られることを願っています。

于 2016-07-01T14:01:16.830 に答える