次のReduxパラダイムの背後にある理由は何ですか？

Question

Iが反応/ Reduxのチュートリアルのカップルに次のコードを見てきた：

componentWillUnmount() { 
    this.unsubscribe(); 
} 

componentDidMount() { 
    this.unsubscribe = this.context.store.subscribe(() => { 
     this.forceUpdate(); 
    }); 
} 

このコードの目的は何ですか？コンポーネントがアンマウントされたときに、このコードはストアが変更されるたびにforceUpdateを呼び出しませんか？なぜ我々はそれを望むだろうか？

Answer 1

スニペットを少し誤解していると思います。

store.subscribe()は、アクションがストアにディスパッチされるたびに実行されるコールバックをとります。また、ストアのリスナーのリストから特定のコールバックを削除する関数を返します。

この例では、アクションは、アクションがディスパッチされるたびに呼び出され、this.forceUpdate()になります。コンポーネントがアンマウントされると、this.unsubscribe()が呼び出され、そのリスナーがストアから削除されます。

しかし、ReactコンポーネントのストアAPIのこの「生の」使用は反パターンです。 React-Reduxライブラリは、すでにストアとのやりとりのプロセスを抽象化しており、これを使用してReactコンポーネントをReduxに接続する必要があります。 Angular、Ember、Vueなどにも同様の抽象化が存在します。実際に自分の店舗購読コードを書くのは正当な理由ではありません。

あなたがそのスニペットを見た場所を示すコメントを残すことができれば、私はそれをしないように奨励したいと思っています。

Answer 2

this.unsubscribe()メソッドを呼び出すと、ストア更新イベントに接続されている以前のイベントハンドラが削除されます。

多くのチュートリアルでは、これはもっと複雑な製品で使用するものではありません。

this.subscribeメソッドをチェックすると、ストアに登録する予定がなくなったときに呼び出す方法が返されます