ReduxでのThunkの直接ディスパッチ

コンポーネントからアクションをディスパッチする際、 コンポーネント内ではstoreに直接アクセスできないため、 フック useDispatch を使用しました。このフックは storeのメソッド dispatch を返します。

今回は、販売者のオブジェクトを取得し、 アプリケーション起動時に一度だけ実行する必要があります。 これは、ワーカーの動作開始後、メインアプリケーションファイル main.jsx から直接行うことができます。

製品アプリケーションを開き、 その中のファイル main.jsx を開いて、 thunk fetchSellers をインポートしましょう：

main.jsximport { fetchSellers } from './parts/sellers/sellersSlice'

このファイルではstoreにアクセスできるため、 ここではフックは不要で、 直接そのメソッド dispatch を利用できます。 次の行の後に追加しましょう：

main.jsxawait worker.start({ onUnhandledRequest: 'bypass' })

次の行を追加します：

main.jsxstore.dispatch(fetchSellers())

アプリケーションを起動しましょう。これで、 製品カードには販売者も表示されます：