React dangerSetInnerHTMLエラーでReduxで約束を拒否する

Question

CMSからのコンテンツを表示するためにReactコンポーネントを設定しました。ここではdangerouslySetInnerHTMLを使用しています。私は標準のフェッチ、要求、非同期アクションを処理するためにサンクで設定されたパターンを受信して​​いる。

アクションの作成者は、次のようになります。私が最初に反応させ、コンポーネントを作成し

export const fetchPage = (slug) => { 
    return (dispatch) => { 
    dispatch(requestPage()); 
    return fetch(`${config.api}/pages/?slug=${slug}`) 
     .then((response) => { 
     const status = response.status; 
     switch (status) { 
      case 200: 
      return response.json(); 
      case 401: 
      return Promise.reject(status); 
      default: 
      return Promise.reject(status); 
     } 
     }) 
     .then(json => 
     dispatch(receivePage({ 
      slug, 
      json, 
     })) 
    ).catch(err => 
     dispatch(receivePageError(err))); 
    }; 
}; 

は、私はフォーマット{ __html: content }でdangerouslySetInnerHTMLオブジェクトに渡すのを忘れて、ちょうど私の不変違反を与え、それcontentを可決しました。私が混乱しているのは、このエラーがreduxの非同期フローに吹き込み、receivePageErrorのディスパッチを引き起こしたということです。 Reactコンポーネント自体ではなく、なぜこのエラーが表示されましたか？

Answer 1

エラーがプロミスのキャッチによってキャッチされました。コード例では、例外のログをコンソールに記録します。

const callAnError =() => { 
 
    throw Error('Error'); 
 
} 
 

 
const callAnErrorParent =() => { 
 
    callAnError(); 
 
} 
 

 
const callAnErrorGrandparent =() => { 
 
    callAnErrorParent(); 
 
}; 
 

 
Promise.resolve().then(() => { 
 
    callAnErrorGrandparent(); 
 
}).catch((error) => { 
 
    console.log(error); 
 
});

https://jsfiddle.net/nfyeu5co/1/

理解が

https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md